脚本宝典收集整理的这篇文章主要介绍了

使用gulp将Vue.component文件中的template转成render函数

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

  在使用vue.js开发项目的时候,如果不能用webpack,要以传统方式开发项目的话,我们会将每个组件写成
Vue.component形式的js文件,然后直接在页面中引入。但是ie浏览器有时候不支持template形式的模板html,
这个时候就要用到一个gulp插件vue-template-inline,将js文件中的template转成ie支持的render函数。
  插件github地址:https://github.com/leeseean/v...,求star,多谢!

使用说明

安装

npm install vue-template-inline --save-dev

用法

未经处理前的js文件

myView.js

Vue.component('example', {
    template: `
        <div>
            <div v-if="show" v-for="(item, index) in list">{{item}}</div>
        </div>
    `,
    data() {
        return {
            show: true,
            list: [1,2,3,4,5],
        };
    }
});

引入vue-template-inline处理js文件:

var inlineVue = require('vue-template-inline');

gulp.task('inline-vue', function () {
  return gulp.src('./src/**/*.js')
    .pipe(inlineVue())
    .pipe(gulp.dest('./dist'));
});

输出处理后的js文件:

myView.js

"use strict";
Vue.component("example", {
    render: function () {
        var n = this,
            e = n.$createElement,
            r = n._self._c || e;
        return r("div", n._l(n.list, function (e, t) {
            return n.show ? r("div", [n._v(n._s(e))]) : n._e()
        }))
    },
    data: function () {
        return {
            show: !0,
            list: [1, 2, 3, 4, 5]
        }
    }
});

总结

以上是脚本宝典为你收集整理的

使用gulp将Vue.component文件中的template转成render函数

全部内容,希望文章能够帮你解决

使用gulp将Vue.component文件中的template转成render函数

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过