1. 程式人生 > >【vue-cil】 vue-cil 開發總結

【vue-cil】 vue-cil 開發總結

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.