Vue有两个版本，完整版和非完整版，本文主要介绍一下这两个版本的区别和使用方法，以及怎么在codesandbox.io中构建简单的vue项目。
一、两个版本的区别
两个版本对应的文件名分别是vue.js和vue.runtime.js，分别对应的是完整版和非完整版。首先了解一下相关概念：
-
完整版：同时包含编译器和运行时的版本。
-
编译器：用来将模板字符串编译成为 JavaScript 渲染函数的代码。
-
运行时：用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。基本上就是除去编译器的其它一切。
完整版同时包含编译器和运行时的版本，非完整版只包含运行时，两个版本的主要区别如下图所示：
两个版本的优缺点：
完整版：
优点：可以直接将视图写在html 或者 js 的 template 中，比较方便。
缺点：① 由于包含编译器，因此完整版的体积比非完整版大30%左右。 ② html 文件中夹杂 vue 语法，导致各类型文件融合到一块，耦合性大
非完整版：
优点：代码体积小，耦合性低。
缺点：由于只能将视图写在 js 中，没有直接写在 html 中，因此SEO不友好，不利于搜索引擎搜索及收录，可以通过写好keywords、description、a标签、h标签等内容进行改进。
最佳实践：总是使用非完整版，然后配合 vue-loader 和 vue 文件。
二、两个版本的使用方法
此处引用bootcdn中的 vue.min.js 和 vue.runtime.min.js 来介绍两个版本的使用方法。
完整版的使用方式
由上述可知，完整版需要将视图直接写在 html 中，直接通过 html 获取视图，下面的内容就会直接在页面显示数字 0，同时为 button 标签添加了点击事件：
index.html中的内容：
main.js中的内容（通过script标签引入会得到全局变量Vue）：
非完整版的使用方式
第一种使用方式：在js中通过render函数得到视图：
index.html中不写视图内容：
在js中写render函数：
结果与完整版一样。
第二种使用方式：通过vue-loader的方式，在src目录下新建一个Demo.vue文件，定义好内容后在main.js中导入该文件得到一个对象，再将该对象放在render函数中。
Demo.vue的内容：
main.js中的内容：
三、在codesandbox.io中构建简单的vue项目
1.进入codesandbox.io
2.选择Create a Sandbox：
3.选择vue：
4.项目搭建成功，开始写代码：
5.可直接导出为zip文件到本地：
