var Toast={};
Toast.install = function (Vue, options) {
    let opt = {
        defaultType:'bottom',   // 預設顯示位置
        duration:'2500'         // 持續時間
    }
    if(options){
        console.log(JSON.stringify(options))
        for(let property in options){
            opt[property] = options[property];  // 使用 options 的配置
        }
    }
    // 1. 新增全域性方法或屬性
    Vue.prototype.toast = function (tips) {
        if(document.getElementsByClassName('vue-toast').length){
            // 如果toast還在，則不再執行
            return;
        }
        let toastTpl = Vue.extend({
            template: '<div class="vue-toast toast-'+opt.defaultType+'">' + tips + '</div>'
        });
        let tpl = new toastTpl().$mount().$el;
 

        document.body.appendChild(tpl);
        setTimeout(function () {
            document.body.removeChild(tpl);
        }, opt.duration)
    }
  }
  export default Toast;

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

(found in <Root>)

main.js中：

 不行XXXXXXXXX啊。這個寫法只適用於那種不需要編譯，runtine.vue.js  這種。

解決方法一：

var Toast={};
Toast.install = function (Vue, options) {
    let opt = {
        defaultType:'bottom',   // 預設顯示位置
        duration:'2500'         // 持續時間
    }
    if(options){
        console.log(JSON.stringify(options))
        for(let property in options){
            opt[property] = options[property];  // 使用 options 的配置
        }
    }
    // 1. 新增全域性方法或屬性
    Vue.prototype.toast = function (tips) {
        if(document.getElementsByClassName('vue-toast').length){
            // 如果toast還在，則不再執行
            return;
        }

        // let toastTpl = Vue.extend({
        //     template: '<div class="vue-toast toast-'+opt.defaultType+'">' + tips + '</div>'
        // });
        // let tpl = new toastTpl().$mount().$el;

        let toastTpl = new Vue({
            render (h) {
              return h('div', tips)
            }
          })
        let tpl = toastTpl.$mount().$el;
 

        document.body.appendChild(tpl);
        setTimeout(function () {
            document.body.removeChild(tpl);
        }, opt.duration)
    }
  }
  export default Toast;

　　能解決，但是新增css不方便，所以另外想辦法。

最後還是用這種方法：

var Toast={};
Toast.install = function (Vue, options) {
    let opt = {
        defaultType:'bottom',   // 預設顯示位置
        duration:'2500'         // 持續時間
    }
    if(options){
        console.log(JSON.stringify(options))
        for(let property in options){
            opt[property] = options[property];  // 使用 options 的配置
        }
    }
    // 1. 新增全域性方法或屬性
    Vue.prototype.toast = function (tips) {
        if(document.getElementsByClassName('vue-toast').length){
            // 如果toast還在，則不再執行
            return;
        }

        /**
         * 需要編譯器
         */
        // let toastTpl = Vue.extend({
        //     template: '<div class="vue-toast toast-'+opt.defaultType+'">' + tips + '</div>'
        // });
        // let tpl = new toastTpl().$mount().$el;
        
        /**
         * 不需要編譯器
         */

        /**
         * 對不同構建版本的解釋:
         * 完整版：同時包含編譯器和執行時的版本。完整版	vue.js	vue.common.js	vue.esm.js
         * 執行時：用來建立 Vue 例項、渲染並處理虛擬 DOM 等的程式碼。基本上就是除去編譯器的其它一切。只包含執行時版	vue.runtime.js	vue.runtime.common.js	vue.runtime.esm.js
         * 編譯器：用來將模板字串編譯成為 JavaScript 渲染函式的程式碼。
         * https://cn.vuejs.org/v2/guide/installation.html#%E8%BF%90%E8%A1%8C%E6%97%B6-%E7%BC%96%E8%AF%91%E5%99%A8-vs-%E5%8F%AA%E5%8C%85%E5%90%AB%E8%BF%90%E8%A1%8C%E6%97%B6
         * 執行時 + 編譯器 vs. 只包含執行時
如果你需要在客戶端編譯模板 (比如傳入一個字串給 template 選項，或掛載到一個元素上並以其 DOM 內部的 HTML 作為模板)，就將需要加上編譯器，即完整版：

// 需要編譯器
new Vue({
  template: '<div>{{ hi }}</div>'
})

// 不需要編譯器
new Vue({
  render (h) {
    return h('div', this.hi)
  }
})
當使用 vue-loader 或 vueify 的時候，*.vue 檔案內部的模板會在構建時預編譯成 JavaScript。你在最終打好的包裡實際上是不需要編譯器的，所以只用執行時版本即可。

因為執行時版本相比完整版體積要小大約 30%，所以應該儘可能使用這個版本。如果你仍然希望使用完整版，則需要在打包工具裡配置一個別名：

webpack
module.exports = {
  // ...
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js' // 用 webpack 1 時需用 'vue/dist/vue.common.js'
    }
  }
}
         */
        let toastTpl = new Vue({
            render (createElement) {
                if (tips) {
                    return createElement('div',{
                        style:{
                            position: 'fixed',
                            top: '0',
                            left: '0',
                            height: '100%',
                            width: '100%',
                        },
                    },[
                        createElement('div', {
                            props:{icon:'search'},
                            style:{
                                backgroundColor:'red',
                                border: 'none',
                                fontSize: '21px',
                                margin: '0px 10px 6px 0px',
                                position: 'absolute',
                                top: '50%',
                                left: '50%',
                                transform: 'translateX(-50%) translateY(-50%)',
                            },
                            on:{
                                click:()=>{
                                     console.log('fff')
                                }
                            }
                        },tips)
                    ])
                }
            }
        })
        let tpl = toastTpl.$mount().$el;
        document.body.appendChild(tpl);
        setTimeout(function () {
            document.body.removeChild(tpl);
        }, opt.duration)
    }
  }
  export default Toast;

　　https://cn.vuejs.org/v2/guide/render-function.html#%E5%AE%8C%E6%95%B4%E7%A4%BA%E4%BE%8B

https://cn.vuejs.org/v2/guide/installation.html#%E8%BF%90%E8%A1%8C%E6%97%B6-%E7%BC%96%E8%AF%91%E5%99%A8-vs-%E5%8F%AA%E5%8C%85%E5%90%AB%E8%BF%90%E8%A1%8C%E6%97%B6

好好看看吧