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

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

1、Vue各类版本的特色和区别

1.1 先说结论

打个比方,完整版是iPhone 11 Pro Max的话,运行时版就是iPhone SE,前者有更高端的芯片(编译器),而且后者有的功能前者都有,后者基本使用没问题,并且更小巧,价格便宜。而你是一个精打细算的人,因此买手机你会买iPhone SE而不是更大更贵的前者。vue

1.2 完整版特色

咱们知道Vue是如今几乎最火的前端框架,框架嘛,最核心的就是封装,封装的目的是为了提高开发效率,知足开发者的需求。Vue也是如此,并且Vue有本身的一套语法,为了识别这套语法,完整版也就是vue.js集成了编译器,你能够理解为Google翻译,把Vue的语法翻译成浏览器能看得懂的东西。因为有这个编译器的存在,完整版能够在js文件中用template渲染页面,好比在main.js里写以下代码,n就能在页面上显示出来。vue-cli

new window.Vue({
  el: "#app",
  template: `<div>{{n}}</div>`,
  data: {
    n: 0
  }
复制代码

1.3 运行时版特色

运行时版主要是完整版砍掉编译器后的版本,既然编译器那么厉害,为何要要砍掉呢?为了节省30%的体积。别小看这30%的体积,当项目很是庞大时,能压缩30%的体积甚至能提升几倍的性能。运行时版能够实现template实时渲染的功能吗?答案是不能的,运行时版想要实时渲染,须要经过js文件里的render()函数,配合vue-loader对.vue文件的处理实现。npm

相似这样,main.js文件里浏览器

new window.Vue({
  el: "#app",
  render(h) {
    return h(Demo);
  }
});
复制代码

Demo.vue文件里bash

<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>markdown

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.runtime.js"></script>app

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

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

相关文章
相关标签/搜索