使用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] } } });
相关推荐
星辰的笔记 2020-07-04
liangjielaoshi 2020-06-11
zhongweinan 2020-06-10
jiangfulai 2020-04-18
UndefineOrNull 2020-02-29
我有一只小松鼠 2020-02-29
UndefineOrNull 2020-03-01
hlihaihong 2020-02-18
UndefineOrNull 2020-02-12
yinuoqingqin 2020-01-13
星辰的笔记 2020-01-13
UndefineOrNull 2020-01-13
hlihaihong 2020-01-13
kaosini 2020-01-12
hlihaihong 2020-01-12
kaosini 2020-01-12
HSdiana 2019-12-25