vue小toast插件报错runtine-only

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中：

import Toast from '@/utils/toast/'

Vue.use(Toast,{aa:'1',bb:'---'})

 

某处：this.toast("11111")

 不行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

好好看看吧