>[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 文件中的模板是在構建時預編譯的，最終打包后的結果不需要編譯器，只需要運行 ~~~