认识 Vue 两个版本的区别和使用方法虽然有两个版本，但现在前端基本是不会用完整版的，平时使用默认都是代码体积小的非完整

Vue 主要分为 **完整版本:vue.js ** 和 运行时版本:vue.runtime.js 两个版本，具体区别如下：

虽然有两个版本，但现在前端基本是不会用完整版的，平时使用默认都是代码体积小的非完整版，因为编译器的脏活只需交给vue-loader去做。选择非完整版的理由如下：

保证用户体验，用户下载的JS文件体积更小，但只支持h函数。
保证开发体验，开发者可直接在vue文件里写HTML标签，而不写 h函数。
活让loader做，vue-loader 会把vue文件里的HTML转为h函数,这样我不用写太多麻烦的 h函数就可做到和完整版一样的事,还更节约文件大小,提升用户体验。

根据两个版本的不同，vue完整版template的使用可直接写到html里面，或者javascript里面

<template>
  <div id="app">
    {{n}}
    <button @click="add">+1</button>
  </div>
</template>

而vue非完整版只能写到render里面:

render(h){
  return h('div',[this.n,h('button',{on:{click:this.add}},'+1')])
},

当使用 vue-loader 或 vueify 的时候，*.vue 文件内部的模板会在构建时预编译成 JavaScript。在最终打好的包里实际上是不需要编译器的，所以只用运行时版本即可。

最佳实践：总是使用非完整版，然后配合 vue-loader 和 vue 单文件组件。

点击进入代码沙盒官网，（建议新手不登陆，登录后只能使用50次），不登陆可以一直使用，点击Create Sanbox，再选择vue，即可创建vue项目。