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