使用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]
        }
    }
});