【vue-cil】 vue-cil 开发总结

最新推荐文章于 2024-06-11 22:24:51 发布

转载最新推荐文章于 2024-06-11 22:24:51 发布 · 392 阅读

前端那些事同时被 2 个专栏收录

54 篇文章

订阅专栏

vue

17 篇文章

订阅专栏

本文探讨了Vue.js中运行时版本与包含编译器版本的区别及应用场景，解析何时应选择只含运行时的轻量版本，以提升项目性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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'),
    }
  },