理顺8个版本vue的区别(小结)

(编辑:jimmy 日期: 2024/11/20 浏览:2)

一共8个版本的vue

理顺8个版本vue的区别(小结)

术语

  • 完整版:同时包含编译器和运行时的版本。
  • 编译器:用来将模板字符串编译成为 JavaScript 渲染函数的代码。
  • 运行时:用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。基本上就是除去编译器的其它一切。
  • UMD:UMD 版本可以通过 <script> 标签直接用在浏览器中。jsDelivr CDN 的 https://cdn.jsdelivr.net/npm/vue 默认文件就是运行时 + 编译器的 UMD 版本 (vue.js)。
  • CommonJS:CommonJS 版本用来配合老的打包工具比如 Browserify 或 webpack 1。这些打包工具的默认文件 (pkg.main) 是只包含运行时的 CommonJS 版本 (vue.runtime.common.js)。
  • ES Module:ES module 版本用来配合现代打包工具比如 webpack 2 或 Rollup。这些打包工具的默认文件 (pkg.module) 是只包含运行时的 ES Module 版本 (vue.runtime.esm.js)。

重点:

如果你需要在客户端编译模板 (比如传入一个字符串给 template 选项,或挂载到一个元素上并以其 DOM 内部的 HTML 作为模板),就将需要加上编译器

通俗来说,就是runtime版本是无法对template进行解析的

一共8个vue版本,都是用在什么情况下的"color: #ff0000">【运行时版本】和【完整版】的区别: 用不用编译"htmlcode">

module.exports = {
 // ...
 resolve: {
  alias: {
   'vue$': 'vue/dist/vue.esm.js' // 用 webpack 1 时需用 'vue/dist/vue.common.js'
  }
 }
}

UMD / CommonJS / ES Module 的区别: 你的vue用在什么地方"color: #ff0000">其他

  • vue源码会根据process.env.NODE_ENV来判断是用生产还是开发环境的代码
  • webpack里可以有自带的 new webpack.DefinePlugin()来设置process.env.NODE_ENV

类似这样

  new webpack.DefinePlugin({
   'process.env': env
  }),

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。