Vue的安装

1.前言

本小节将带领大家学习一下如何安装 Vue。包括独立版本、CDN、NPM、CLI 工具四种不同的安装方法。

2.独立版本

我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入

安装步骤:

打开Vue.js下载地址并拷贝所有代码。
创建vue.min.js文件，并将拷贝的源码粘贴进去。
创建index.html并通过<script>标签引入。
打印Vue验证是否成功。

文件结构

  └─ lession
    ├─ index.html
    └─ vue.min.js

实例演示

<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      Hello Imooc ！
    </div>
  </body>
  <script src="./vue.min.js"></script>
  <script type="text/javascript">
    console.log(Vue)
  </script>
</html>

打印结果

ƒ wn(e){this._init(e)}

3.使用CDN方法

使用 CDN 的方式引入Vue更加方便、快捷。以下推荐几个比较稳定的 CDN。

实例演示

<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      Hello Imooc ！ 
    </div>
  </body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
  <script type="text/javascript">
    console.log(Vue)
  </script>

运行结果
Hello Imooc ！

4. 使用NPM的方法

使用NPM的方法进行安装需要先在本地安装Node环境。

4.1、Windows 上安装 Node.js

32 位安装包下载地址
 64 位安装包下载地址
下载对应的安装包后，双击安装包，傻瓜式下一步安装就好了。

4.2、Mac 上安装 Node.js

在官方下载网站下载 pkg 安装包，直接点击安装即可。
使用 brew 命令来安装：brew install node

代码块  
    brew install node

代码块  
    查看本地node环境  
    $ node -v  
    v10.16.0

在用 Vue 构建大型应用时推荐使用 NPM 安装。当然，仅仅使用npm install是不能完整搭建Vue开发环境的。还需要webpack或 Browserify 等模块打包器配合使用。

代码块  
创建项目目录  
$ mkdir demo

进入项目文件夹  
$ cd demo  
$ npm init -y

最新稳定版  
$ npm install vue

安装指定版本Vue  
$ npm install vue@2.6.3

安装完成后可以查看到demo目录下多了 node_module/vue 文件夹。说明Vue成功安装。

5. 命令行工具（CLI）

当然，看过 $\color{#4c76c9}{Vue}$ 官网的同学肯定都知道 $\color{#4c76c9}{Vue}$ 提供了一个官方的 $\color{#0088cc}{Cli}$ ，为我们快速搭建大型单页应用。我们并不建议同学们在一开始就使用 $\color{#4c76c9}{Vue-Cli}$ 来构建项目，因为这需要同学们对 $\color{#4c76c9}{Node.js}$ 、 $\color{#4c76c9}{Webpack}$ 等技术有所了解。在熟悉了 $\color{#4c76c9}{Vue}$ 的语法之后，我们将有一个完整的章节来学习和使用 $\color{#4c76c9}{Vue-Cli}$ 。

6. 小结

本小节我们介绍了 $\color{#4c76c9}{Vue}$ 安装的几种方式。作为初学者，我们建议同学们先使用第一、第二种方式进行学习。在对 $\color{#4c76c9}{Vue}$ 有一定的了解之后再学习脚手架工具 $\color{#4c76c9}{Vue-Cli}$ 的使用。在接下来 $\color{#4c76c9}{Vue}$ 基础的章节中我们都将使用 <script src="https://unpkg.com/vue/dist/vue.js"></script> 的方式进行代码演示。关于脚手架工具 $\color{#4c76c9}{Vue-Cli}$ 的学习，我们将在最后一个章节中一起探讨。