Vue的完整版和非完整版的差別

Vue是一個前端框架，做者尤雨溪。經常使用兩個版本，俗稱完成版和非完整版。在BootCDN（ www.bootcdn.cn/ ） 查詢"vue"，會獲得多個版本,挑選以下4個進行說明。

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.runtime.js"></script>
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.runtime.min.js"></script>
複製代碼

後面兩個帶"runtime"就是非完整版，前面兩個就是完整版，其中帶"min"表示沒有註釋的版本，體積更小，故時經常使用的是min的版本。

完整版和非完整版的差別主要在於：完整版包含有compiler(編譯器)，而非完整版須要搭配vue loader。聽起來完整版更加方便，可是事物的兩面性就在於完整版體積大，比不完整版大約30%，因此爲了更好的客戶體驗，非完整版成爲第一首選。

迴歸到代碼使用，完整版的視圖是直接寫在HTML裏或者template選項裏，非完整版要寫到render函數裏，並用h來建立標籤。

//完整版 直接寫在template選項裏面
<template>
    <div id="app">      
        {{n}}
        <button @click="add">+1</button>   
   </div> 
</template>
複製代碼

//非完整版，視圖使用render函數，並用h函數建立標籤。
render(h){ 
     return h('div', [this.n,h（'{on:{click:this.add}’,'+1']) } 複製代碼

若是版本用錯了，瀏覽器會直接報錯。

最後，補充如何建立一個vue項目，這裏介紹有兩種方法，第1種，按照做者尤雨溪的教程（ cli.vuejs.org/zh/guide/cr… ）。第2種使用codesandbox，咱們重點說說這個：

1. 進入 codesandbox.io/
2. Create a sandbox ->選擇Vue ->這樣就建立好了。

   

3. 保存下載。File -> Export to ZIP