Vue入门之版本区别及安装使用

对于刚开始学习Vue的新人来讲，第一眼看到下面这张图是否是会有同感，以个人经验来看，版本问题多是新人学习Vue时遇到的第一大问题，怎么有好几个版本？这两个版本到底有什么区别？我到底该用哪一个？别着急，本文会给你答案。

1、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 生产环境版

生产环境版是对应的默认版本的压缩，删除了注释和报错信息，体积更小，适合开发测试完成以后部署上线。

2、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开启项目预览。

3、推荐一个在线编辑器

若是想快速练习，能够使用 codesandbox.io/

进入首页，无需登陆，点击Create a Sandbox

很快就进入下面这个页面，看到全部东西都生成好了，小伙伴们能够愉快地开始开发了！