区别
vue有两个版本，分别是vue完整版：vue.min.js 和非完整版：vue.runtime.js
完整版：同时包含编译器和运行时的版本（compiler + runtime）。
非完整版：用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。基本上就是除去编译器的其它一切（runtime）
完整版是把法方试图数据都写在new vue上，视图和样式也可以写在index.html上，然后new vue写个el将方法挂载到html上。最终渲染到页面是通过vue.js自带的compiler编译器将main.js里的内容渲染成页面上的dom节点。这样的话，如果后续要对数据进行修改，它就会直接修改dom的节点达到想要的效果。
而不完整版本的vue.runtime.js是这样的：先把东西写好在xx.vue组件里，然后通过vue自带的vue loader翻译成js能读懂的东西，然后经过render渲染到页面上。
两种不同的构建版本的具体使用
现在我们分别使用 Vue 两种不同版本的构建工具实现一个点击按钮数字加一的功能，来具体看一下两种版本的实现方式：
（1）使用完整版（vue.runtime.js + compiler）支持将 template 选项或 html 文件中的代码直接编译成页面的 dom 节点。
<div id="app"></div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
template: `<div>{{ num }} <button @click="increment">+1</button></div>`,
data: {
number: 0
},
methods: {
incremente() {
this.num ++;
}
}
});
</script>（2）仅使用运行时版（vue.runtime.js ）可以实现同样的效果，但是项目体积会更小，但是这对开发人员不友好。
<div id="app"></div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.runtime.js"></script>
<script>
var app = new Vue({
el: "#app",
data: { num: 0 },
methods: {
increment() {
this.num ++;
}
},
render(createElement) {
return createElement("div", [
this.num,
createElement("button",{ on: { click: this.increment } }, "+1")
]);
}
});
</script>两种方式的优缺点：第一种完整版的方式对开发人员友好，html 可以直接写到 template 或 html 文件中，完整版可以通过编译器直接将其渲染成页面给上的 dom 节点，但是较运行时版体积较大。第二种运行时版的方式对开发人员不友好，但是项目体积较少。 为应对上述问题，
可以将 运行时版结合 vue-loader + *vue文件 的方式，可以将写在 vue 文件中的 html 预先转化为 h 函数的形式，这样即可以满足项目体积小用户体验好，又可以满足开发人员直接写 html 的两种需求。
用 codesandbox.io 写 Vue 代码
如果你需要在新的环境，或在其他接触不到你自己电脑的环境下开发，推荐使用 CodeSandBox 进行在线开发。
CodeSandbox 是一个为 Web 应用程序开发而构建的在线编辑器，这个网站内置了多种 Web 开发框架的编译及运行配置，使得开发人员不需要进行繁琐的项目配置就可以着手进行开发工作，从而更好的专注于编写代码。
进入网站点击create,选择框架，就可以快速创建你的项目啦！
