【vue-cil】 vue-cil 開發總結
阿新 • • 發佈:2018-12-15
1. 專案執行時+編譯器(Runtime+Compiler)版本vs只含有執行時版本(Runtime-only)--儘可能使用只含有執行時的構建版本
如果你需要在客戶端編譯模板(例如,向 template
選項傳入一個字串,或者需要將模板中的非 DOM 的 HTML 掛載到一個元素),你需要帶有編譯器的版本,因而需要完整構建版本。
// 這種情況需要編譯器(compiler) new Vue({ template: '<div>{{ hi }}</div>' }) // 這種情況不需要 new Vue({ render (h) { return h('div', this.hi) } })
在使用 vue-loader
或 vueify
時,*.vue
檔案中的模板會 在構建時(build time)預編譯(pre-compile)為 JavaScript。最終生成的 bundle 中你不再需要編譯器(compiler),因此可以直接使用只含有執行時的構建版本(runtime-only)。由於只含有執行時構建版本(runtime-only)比完整構建版本(full-build)輕量大約 30%,你應該儘可能使用只含有執行時的構建版本。
在vue-cli,src/main.js中修改如下:
new Vue({ el: '#app', router, store, // components: { App }, // template: '<App/>' render:(h)=>h(App)})
build/webpack.base.conf.js 檔案中註釋掉:
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
// 'vue$': 'vue/dist/vue.esm.js', //需註釋的
'@': resolve('src'),
}
},
2.