完整版和運行時版
打開vue的官網，你會發現有vue有兩種不同的構建版本，Vue官方對兩種不同構建版本的解釋是這樣子的：
-
完整版：同時包含編譯器和運行時的版本（編譯器：用來將模板字符串編譯為js渲染函數的代碼）
-
運行時：用來創建Vue實例，渲染並處理虛擬DOM等的代碼，基本上就是出去編譯器的其它一切。
| 兩種版本 | UMD | Commonjs | 基於構建工具使用 | 直接用於瀏覽器 |
|---|---|---|---|---|
| 完整版 | vue.js | vue.common.js | vue.esm.js | vue.esm.browser.js |
| 運行時版 | vue.runtime.js | vue.runtime.common.js | vue.runtime.esm.js |
兩種版本的區別
| 比較列 | 完整版 | 運行時版 | 評價 |
|---|---|---|---|
| 特點 | 有compiler | 沒有 compiler | 完整版體積較大，其中僅compiler就占整個文件40%大小 |
| 視圖 | 寫在html中或者寫在template選項中 | 寫在 render 函數里，用 h 來創建標簽 | h 是尤雨溪寫好傳給 render 的 |
| CDN引入 | vue.js | vue.runtime.js | 文件名不同，生成環境后綴為 .min.js |
| webpack 引入 | 需要配置 alias | 默認使用此版本 | 尤雨溪所配置 |
| @vue/cli 引入 | 需要額外配置 | 默認使用此版本 | 尤雨溪蔣豪群所配置 |
最佳實踐：總是使用非完整版，然后配合vue-loader 和 vue 來進行使用。
思路：
-
保證用戶體驗，用戶下載的 JS 文件體積更小，但只支持 h 函數。
-
保證開發體驗，開發者可直接在 vue 文件里面寫 html 標簽，而不寫 h 函數
-
臟活累活讓 loader 做，vue-loader 把 vue 文件里面的 html 轉為 h 函數。