1分钟看懂vue的两个版本
完整版：vue.js
我们可以从cdn引用vue.js或vue.min.js链接（bootCDN）
也可以通过import引用。
引入后，他就会变成一个含有vue功能的全局变量。
功能实现直接在html中进行操作，从html得到视图。
其功能非常完整，体积巨大。
语法：
// 需要编译器new Vue({ template: '<div>{{ hi }}</div>'})使用完整版vue.min.js时我们需要用到template，template可以写在页面里也可以在js中。
非完整版：vue.runtime.js
我们可以从cdn引用vue.runtime.js或vue.runtime.min.js链接（bootCDN）
也可以通过import引用。
引入后，他就会变成一个含有vue功能的全局变量。
功能实现主要通过JS自身，相对独立。
其功能不完整，但是产生的体积要比vue.js小30%。
// 不需要编译器new Vue({ render (h) { return h('div', this.hi) }})使用vue.runtime.min.js则需使用render()
两者的混合应用vue-loader
通过打包工具（webpack）实现开发时使用完整版，打包后变成runtime版，这样开发时就很快乐，用户打开该页面体积也会变小，实现双重快乐。
vue单文件组件
我们也可以单独开辟一个.vue文件，将其import引入main.js
这样做缺陷挺大，seo不友好
例子
首先我们配置好的src文件夹中创建一个Demo.vue文件：
<template> <div class="red"> {{n}} <button @click="add">+1</button> </div></template><script>export default { data() { return { n: 0 }; }, methods: { add() { this.n += 1; } }};</script><style scoped>.red { color: red;}</style>以上就是HTML视图了。接着我们将这个视图文件引入到main.js
中。
import Demo from "./Demo.vue"; new Vue({ el: "#app", render(h) { return h(Demo); },});引入后就可以正常使用了。
codesandbox.io写 Vue 代码
进入官网选择vue，下载后用vscode打开即可，同样可以获得一个配置好的vue模板
