本文主要介绍Vue完整版与非完整版的区别与优缺点：
最佳实践：总是使用非完整版，然后配合vue-loader和vue文件
具体思路：
保证用户体验，用户下载的 JS 文件体积更小，但只支持 h 函数
保证开发体验，开发者可直接在 vue 文件里写 HTML 标签，而不写 h 函数
中间的转换过程让
loader 来做，vue-loader把 vue 文件里的 HTML 转为 h 函数
引入
- 完整版：
vue.js
链接：https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js - 非完整版（只包含运行时版）:
vue.runtime.js
链接：https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.runtime.js
用法
- 使用完整版，引入
vue.js时，视图写在HTML里或template中
new window.Vue({
el: "#app",
template: `
<div @click="add">{{n}} <button>+1</button></div>
`,
data: {
n: 0
},
methods:{
add(){
this.n += 1
}
}
})
- 使用非完整版，引入
vue.runtime.js时，视图写在render中
new window.Vue({
el: "#app",
render(h){
return h("div", [this.n, h("button", {on:{click: this.add}}, "+1")])
},
data: {
n: 0
},
methods:{
add(){
this.n += 1
}
}
})
使用codesandbox.io写Vue代码
- 点击 进入官网
- 点击 "Create a Sandbox, it's free"
- 选择 "Vue"
可以把创建开发好的项目代码下载到本地：选择file => Export to ZIP
