1.本地安装

终于开始系统学习vue,让我们先从先从安装开始。根据官方的建议，想要使用vue，最简单的方法就是直接在<script>标签中引入，就像使用jQuery一样。

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

其次，可以使用NPM安装。

# 最新稳定版
$ npm install vue

最后，一个比较麻烦但是非常有用的工具，使用Vue Cli来搭建脚手架，全局安装命令：

npm install -g @vue/cli
# OR
yarn global add @vue/cli

有关Vue Cli更详细的的介绍可以参考官网 Vue Cli。

2.vue 的不同版本

根据官网的介绍，我们发现有多种vue.js 构建版本：

标题	UMD	CommonJS	ES Module (基于构建工具使用)	ES Module (直接用于浏览器)
完整版	vue.js	vue.common.js	vue.esm.js	vue.esm.browser.js
只包含运行时版	vue.runtime.js	vue.runtime.common.js	vue.runtime.esm.js	-
完整版 (生产环境)	vue.min.js	-	-	vue.esm.browser.min.js
只包含运行时版 (生产环境)	vue.runtime.min.js	-	-	-

我们先说开发版本与生产版本的区别：

开发版本 ———— 包含完整的警告和调试模式
生产版本 ———— 删除了警告，33.46KB min+gzip 所以官网也在提醒我们，在实际开发中，不要使用生产版本也就是压缩版本，否则看不到所有错误相关的警告。

再说完整版和只包含运行时版本的区别：

完整版：同时包含编译器和运行时的版本，编译器可以用来将模板字符串编译成为 JavaScript 渲染函数的代码。
运行时版：用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。基本上就是除去编译器的其它一切。体积比完整本小约30%。

以代码为例，如果我们使用完整版本，我们可以这么来编译模板：

// 需要编译器 
new Vue({
    template: '<div>{{ hi }}</div>' 
})

而使用运行时版本，我们要这么来编译模板：

new Vue({ 
    render (h) { 
    return h('div', this.hi) } 
})

很显然，虽然运行时版本体积更小，但是使用 template 比使用 render 更加符合我们编译习惯，为了解决这个问题，我们可以使用vue-loader打包工具，在打包的时候，将 template 的模板预编译成 JavaScript，这样就可以不使用编译器，也可使用 template 这种更方便的写法了。

3.直接使用 codesandbox

无论是直接引入vue.js文件还是使用@vue/cli 开发工具，你可以都会觉得有点麻烦。没关系，有一个方便的线上开发网站，可以帮助我们省去前戏，直接开始Vue的学习：

打开网址 codesandbox
在网页的右上角点击 Create Sandbox 按钮

选择 Vue 或者 Vue3

开始使用

Vue安装初体验

1.本地安装

2.vue 的不同版本

3.直接使用 codesandbox