>[success] # vue 版本 ~~~ 1.完整版：同时包含编译器和运行时的版本。 Vue中的Template需要编译器将其转换为render函数变为虚拟DOM才能使用，而运行时直接编译template会报错并提示使用完整版进行编译 2.编译器：用来将模板字符串编译成为 JavaScript 渲染函数的代码，体积大、效率低。 3.运行时：用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码，体积小、效率高。基本上就是除去编译器的代码。即不包含编译器，不包含编译器会少三千多行代码, 体积要小大约 30% 4.UMD：UMD 版本通用的模块版本，支持多种模块方式（AMD\直接挂载到浏览器对象中\CommonJS）。 vue.js 默认文件就是运行时 + 编译器的UMD 版本 5.CommonJS(cjs)：CommonJS 版本用来配合老的打包工具比如 Browserify 或 webpack 1。 6.ES Module：从 2.6 开始 Vue 会提供两个 ES Modules (ESM) 构建文件，为现代打包工具提供的版本。 ESM 格式被设计为可以被静态分析，所以打包工具可以利用这一点来进行“tree-shaking”并将用不到的代码排除出最终的包。 ~~~ ~~~ 基于 Vue-CLI 创建的项目默认为运行时版本且使用ESM构建文件 即 vue.runtime.esm.js 推荐也使用运行时版本 在命令中端输入vue inspect > output.js 可以查看webpack的配置, 将其输出为output.js文件 vue打包时会将组件转换为js，将template转换为render函数 Runtime + Compiler vs. Runtime-only // Compiler // 需要编译器，把 template 转换成 render 函数 // const vm = new Vue({ // el: '#app', // template: '<h1>{{ msg }}</h1>', // data: { // msg: 'Hello Vue' // } // }) // Runtime // 不需要编译器 const vm = new Vue({ el: '#app', render (h) { return h('h1', this.msg) }, data: { msg: 'Hello Vue' } }) 注意： *.vue 文件中的模板是在构建时预编译的，最终打包后的结果不需要编译器，只需要运行 ~~~