完整版
vue@cli默认安装的是非完整，所以我们使用cdn引入完整版的vue.js来进行测试它们的区别。引用地址：
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
在index.html中引入全局的完整版vuejs。在main.js中写下如下代码
成功的在页面中显示data中的say变量。
非完整版
在看看非完整版会怎么样，你可以进入CDN 自行查找,加了runtime字样的就是非完整版，或使用我贴出来的引用地址：
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.runtime.min.js"></script>
更改引用地址之后运行
你会发现控制的同样输出了一个函数，但是没有输出变量say。你可以试着使用template但它并不会起作用。
如何使用非完整版
那么非完整版要怎么使用呢，去看看官方文档
非完整版其实只包含运行时，比完整版少了一个编译器
需要使用上面不需要编译的写法,下面我们就来感受没有不需要编译器的写法一下
render(h) {
return h('div', this.say)
}
添加一个按钮
render(h) {
return h('div', [this.say, h('button', 'say')])
}
为按钮添加事件
render(h) {
return h('div', [this.say, h('button', { on: { click: this.add } }, 'say')])
},
methods: {
add() {
alert(this.say)
}
},
到这里你应该可以发现了，在没有编译器的情况下代码是有多么难写。
vue-cli为什么默认使用非完整版
最大的原因是体积小，非完整版的体积只有完整版的40%，compiler（编译器）的体积占了40%的vuejs。
那么问题来了：为什么vue@cil默认安装的就是非完整版而且而我们写代码的时候又可以像写完整版一样呢？？
vue-loader
答案就webpack中的loader 也就是vue-loader。
使用用webpack配置的同学应该再熟悉不过loader了吧。就像babel-loader是将高级的js转换为可以兼容IE的js一样。vue-loader将我们写的的代码转换为不需要编译器的代码。
使用weibpack就可以做到剔除掉compiler之后vue代码还是可以照常运行。
总结
完整版自带了编译器用来解析用户编写的HTML代码。非完整版由于剔除了模板编译器因此只能使用vue提供的h函数来构造dom结点，若想使用非完整版来获得完整的开发体验需要使用 vue-loader 该 webpack 插件。
使用codesandbox.io网站来写vue，注意使用的时候不要登入，不然会限制你的项目数量。还可以导出到本地。
