对于刚开始学习Vue的新人来说，第一眼看到下面这张图是不是会有同感，以我的经验来看，版本问题可能是新人学习Vue时遇到的第一大问题，怎么有好几个版本？这两个版本到底有什么区别？我到底该用哪个？别着急，本文会给你答案。
一、Vue各种版本的特点和区别
1.1 先说结论
打个比方，完整版是iPhone 11 Pro Max的话，运行时版就是iPhone SE，前者有更高端的芯片（编译器），并且后者有的功能前者都有，后者基本使用没问题，而且更小巧，价格便宜。而你是一个精打细算的人，所以买手机你会买iPhone SE而不是更大更贵的前者。
1.2 完整版特点
我们知道Vue是现在几乎最火的前端框架，框架嘛，最核心的就是封装，封装的目的是为了提升开发效率，满足开发者的需求。Vue也是如此，而且Vue有自己的一套语法，为了识别这套语法，完整版也就是vue.js集成了编译器，你可以理解为Google翻译，把Vue的语法翻译成浏览器能看得懂的东西。由于有这个编译器的存在，完整版可以在js文件中用template渲染页面，比如在main.js里写如下代码，n就能在页面上显示出来。
new window.Vue({
el: "#app",
template: `<div>{{n}}</div>`,
data: {
n: 0
}
1.3 运行时版特点
运行时版主要是完整版砍掉编译器后的版本，既然编译器那么厉害，为什么要要砍掉呢？为了节省30%的体积。别小看这30%的体积，当项目非常庞大时，能压缩30%的体积甚至能提高几倍的性能。运行时版可以实现template实时渲染的功能吗？答案是不能的，运行时版想要实时渲染，需要通过js文件里的render()函数，配合vue-loader对.vue文件的处理实现。
类似这样，main.js文件里
new window.Vue({
el: "#app",
render(h) {
return h(Demo);
}
});
Demo.vue文件里
<template>
<div class="red">
{{n}}
</div>
</template>
<script>
export default {
data() {
return {
n: 0
};
}
};
</script>
1.4 生产环境版
生产环境版是对应的默认版本的压缩，删除了注释和报错信息，体积更小，适合开发测试完成之后部署上线。
二、Vue的安装
2.1 直接通过CDN引入Vue
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.runtime.js"></script>
2.2 通过Vue提供的命令行工具 @vue-cli
- 全局安装 @vue-cli ：
yarn add global @vue/cli vue --version：查看@vue/cli是否已经成功安装- 创建项目目录：
vue create [projName]在[projName]目录下创建项目，或者vue create .即在当前目录下创建项目。 cd [projName]然后yarn serve开启项目预览。
三、推荐一个在线编辑器
如果想快速练习，可以使用 codesandbox.io/
进入首页，无需登录，点击Create a Sandbox
很快就进入下面这个页面，看到所有东西都生成好了，小伙伴们可以愉快地开始开发了！
