### Vue的js文件下载 #### 开发版本 https://cn.vuejs.org/js/vue.js https://cdn.jsdelivr.net/npm/vue/dist/vue.js #### 生产版本 https://cn.vuejs.org/js/vue.min.js https://cdn.jsdelivr.net/npm/vue@2.6.11 ， 这里可以带版本号 Jsdelivr_免费公用CDN加速服务网 https://cdn.jsdelivr.net/npm/vue/ ### 编译器与运行时 其实都是JS代码。 * 编译器： 将模板字符串编译为JavaScript渲染函数的代码。 * 运行时： 创建Vue实例，渲染并处理虚拟DOM等的代码。 * 完整版： 同时包括编译器和运行时。 其他版本： * UMD： Universal Module Definition， 通用模块定义规范。其没有自己专有的规范，是集结了 CommonJs、CMD、AMD 的规范于一身。 https://github.com/umdjs/umd * **[CommonJS](http://wiki.commonjs.org/wiki/Modules/1.1)**，配合老的打包工具[Browserify](http://browserify.org/)或[webpack 1](https://webpack.github.io/) **[ES Module](http://exploringjs.com/es6/ch_modules.html)** 传入字符串给`template`，或挂载一个元素并以其DOM内部的HTML作为模板，就需要编译器 ``` // 需要编译器 new Vue({ template: '<div>{{ hi }}</div>' }) ``` ``` // 不需要编译器 new Vue({ render (h) { return h('div', this.hi) } }) ``` 运行时版本比完整体积小 30%。 如果需要打包编译器，也就是打包完整版的Vue， 对不同的打包工具需要配置一个别名： #### webpack ``` module.exports = { // ... resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js' // 用 webpack 1 时需用 'vue/dist/vue.common.js' } } } ``` #### Rollup ``` const alias = require('rollup-plugin-alias') rollup({ // ... plugins: [ alias({ 'vue': require.resolve('vue/dist/vue.esm.js') }) ] }) ``` #### Browserify 添加到你项目的 package.json ``` { // ... "browser": { "vue": "vue/dist/vue.common.js" } } ``` #### Parcel 在你项目的 package.json 中添加： ``` { // ... "alias": { "vue" : "./node_modules/vue/dist/vue.common.js" } } ``` ### 开发环境 Vs. 生产环境模式 * UMD， 开发环境/生产环境是硬编码好的， 开发环境未压缩代码， 生产环境压缩后的代码 * CommonJS 和 ES Module， 自行压缩。CommonJS 和 ES Module 版本同时保留原始的`process.env.NODE_ENV`检测，以决定它们应该运行在什么模式下。你应该使用适当的打包工具配置来替换这些环境变量以便控制 Vue 所运行的模式。把`process.env.NODE_ENV`替换为字符串字面量同时可以让 UglifyJS 之类的压缩工具完全丢掉仅供开发环境的代码块，以减少最终的文件尺寸。 * webpack 4+ ``` module.exports = { mode: 'production' } ``` * Rollup ``` const replace = require('rollup-plugin-replace') rollup({ // ... plugins: [ replace({ 'process.env.NODE_ENV': JSON.stringify('production') }) ] }).then(...) ``` * Browserify ``` NODE_ENV=production browserify -g envify -e main.js | uglifyjs -c -m > build.js ``` ### 命令行工具 为单页面应用（SPA）快速搭建脚手架 ### 开发调试工具 https://github.com/vuejs/vue-devtools#vue-devtools