目錄
1、Vue 的兩個不同版本的介紹
首先你要了解如何創建一個 Vue 項目，如果你還不熟悉的話，可以移步到這裏：傳送門。創建 Vue 項目的過程中會涉及到 Vue 兩個不同版本的選擇：（1）完整版：vue.js、（2）只包含運行時版：vue.runtime.js 下面說一下它們之間的差異：
- 完整版：同時包含編譯器和運行時的版本（compiler + runtime）。
- 編譯器：用來將模板字符串編譯成爲 JavaScript 渲染函數的代碼（compiler）。
- 運行時：用來創建 Vue 實例、渲染並處理虛擬 DOM 等的代碼。基本上就是除去編譯器的其它一切（runtime）。
| Vue 完整版 | Vue非完整版 | 描述 | |
| 特點 | 有 compiler 編譯器 | 沒有 compiler 編譯器 | compiler 佔 40% 體積 |
| 視圖 | 寫在 HTML 文件或 template 選項中 | 寫在 render 函數裏，用 h 函數來創建標籤 | h 是尤雨溪寫好傳給 render 的 |
| cdn 引入 | vue.js | vue.runtime.js | 文件名不同，生成環境後綴爲 .min.js |
| webpack 引入 | 需要配置 alias | 默認使用此版 | 別問，尤雨溪配置的 |
| @vue/cli 引入 | 需要額外配置 | 默認使用此版 | 別問，尤雨溪、蔣豪羣配置的 |
推薦使用 vue.runtime.js 非完整版，然後配合 vue-loader 和 vue 文件思路，這樣可以保證用戶體驗，用戶下載的 JS 文件體積更小，但只支持 h 函數。而且可以保證開發體驗，開發者可直接在 vue 文件裏寫 HTML 標籤，而不寫 h 函數，多餘的工作讓 loader 做，vue-loader 把 vue 文件裏的 HTML 轉爲 h 函數。
2、運行時+編譯器 vs 只包含運行時
如果你需要在客戶端編譯模板 (比如傳入一個字符串給 template 選項，或掛載到一個元素上並以其 DOM 內部的 HTML 作爲模板)，就將需要加上編譯器，即完整版：
// 需要編譯器
new Vue({
template: '<div>{{ hi }}</div>'
})
// 不需要編譯器
new Vue({
render (h) {
return h('div', this.hi)
}
})
當使用 vue-loader 或 vueify 的時候，*.vue 文件內部的模板會在構建時預編譯成 JavaScript。你在最終打好的包裏實際上是不需要編譯器的，所以只用運行時版本即可。
因爲運行時版本相比完整版體積要小大約 30%，所以應該儘可能使用這個版本。如果你仍然希望使用完整版，則需要在打包工具裏配置一個別名，詳情移步：傳送門
3、template 和 render() 的使用區別
在 Vue 完整版 vue.js 下可以使用 template 選項，因爲其內置 compiler 編譯器，可以將 template 字符串編譯成 h 函數，從而達到直接從 HTML 渲染視圖的效果。如果是在 Vue 非完整版 vue.runtime.js 下就只能使用 render 的 h 函數，通過 JS 構建的方法來達到渲染視圖的效果。
//完整版 - 需要 compiler 編譯器 - 編譯 template
new Vue({ //這個vue實例封裝了一些東西，類似jQuery封裝的 return api
el:'#app', //el代表渲染掛在節點，會被替換，同$mount('#app') //涉及到 SEO 友好、服務端渲染
data:{ num:0 } //完整版支持從html中獲取視圖
template: '<div>{{ num }}</div>' //template內容可以寫在html文件中，完整版都支持
})
//運行時版 - 不需要 compiler 編譯器 - 只能使用 h 函數
new Vue({ //這個vue實例封裝了一些東西，類似jQuery封裝的 return api
render (h) { //不支持template選項或從html中獲取視圖
return h('div', this.num) //可以將 h 函數類別成 createElement()
}
})
補充，運行時版通過 render 和 h 函數來創建視圖，看似麻煩，但是這種方式是比較提倡的，這也就是爲什麼在 使用 webpack 引入 或 @vue/cli 引入時 默認使用此版本，那麼具體原因是什麼呢？
我們知道完整版使用 運行時 vue.runtime.js + 編譯器 compiler 組合的形式，支持直接將寫在 template 或 html 文件中的字符串編譯成 dom 節點，非完整版只有運行時 vue.runtime.js，不支持上述編譯，但實際上非完整版有一個 預編譯的 loader 加載器，使用 vue.runtime.js 非完整版，然後配合 vue-loader 可以將寫在 vue 文件中的 HTML 標籤轉義爲 h 函數，實現預編譯的功能。
使用 vue.runtime.js 非完整版配合 vue-loader 可以保證用戶體驗，用戶下載的 JS 文件體積更小，但只支持 h 函數。而且可以保證開發體驗，開發者可直接在 vue 文件裏寫 HTML 標籤，而不寫 h 函數，多餘的工作讓 loader 做，vue-loader 把 vue 文件裏的 HTML 轉爲 h 函數。
4、兩種不同的構建版本的具體使用
現在我們分別使用 Vue 兩種不同版本的構建工具實現一個點擊按鈕數字加一的功能，來具體看一下兩種版本的實現方式：
（1）使用完整版（vue.runtime.js + compiler）支持將 template 選項或 html 文件中的代碼直接編譯成頁面的 dom 節點。
<div id="app"></div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
template: `<div>{{ num }} <button @click="increment">+1</button></div>`,
data: {
number: 0
},
methods: {
incremente() {
this.num ++;
}
}
});
</script>
（2）僅使用運行時版（vue.runtime.js ）可以實現同樣的效果，但是項目體積會更小，但是這對開發人員不友好。
<div id="app"></div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.runtime.js"></script>
<script>
var app = new Vue({
el: "#app",
data: { num: 0 },
methods: {
increment() {
this.num ++;
}
},
render(createElement) {
return createElement("div", [
this.num,
createElement("button",{ on: { click: this.increment } }, "+1")
]);
}
});
</script>
兩種方式的優缺點：第一種完整版的方式對開發人員友好，html 可以直接寫到 template 或 html 文件中，完整版可以通過編譯器直接將其渲染成頁面給上的 dom 節點，但是較運行時版體積較大。第二種運行時版的方式對開發人員不友好，但是項目體積較少。
爲應對上述問題，可以將 運行時版結合 vue-loader + *vue文件 的方式，可以將寫在 vue 文件中的 html 預先轉化爲 h 函數的形式，這樣即可以滿足項目體積小用戶體驗好，又可以滿足開發人員直接寫 html 的兩種需求，完美！
5、用 codesandbox.io 寫 Vue 代碼
如果你需要在新的環境，或在其他接觸不到你自己電腦的環境下開發，推薦使用 CodeSandBox 進行在線開發。
CodeSandbox 是一個爲 Web 應用程序開發而構建的在線編輯器，這個網站內置了多種 Web 開發框架的編譯及運行配置，使得開發人員不需要進行繁瑣的項目配置就可以着手進行開發工作，從而更好的專注於編寫代碼。CodeSandbox 彷彿就是一個在線的 webstorm 編譯器，並且還給你設置好了所有開發前的準備配置，它還支持以 zip 的形式導出你的項目，趕快去試試吧 ~