2.1 安装和引入

本节内容将讲述如何在不使用项目构建工具的条件下，安装和引入Vue及其特定的调试工具。

对于原有的项目来说，由于Vue是一个轻量级、渐进式的JavaScript框架，所以你可以不用考虑将原有的技术架构直接引入Vue.js进行开发。即使在Angular的项目中引入Vue.js也是可以的，不过基本没有人会这么做，因为这会使得项目结构变得混乱和难以管理，并且完全没有必要。这是一个极端的例子，不过在某些并不极端的场合下，得益于Vue.js的灵活性，我们完全可以直接引入Vue.js。

上面所说的“直接引入”是相对于项目构建工具引入而言的。如果要开发全新的Vue项目，笔者建议使用项目构建工具Vue CLI，它可以快速构建一个“开箱即用”的大型单页应用，并提供了优秀的构建配置。之后，开发者只需要关注业务本身和核心代码的编写就可以了，之后会有专门的章节对其进行描述。

2.1.1 如何引入Vue.js

可以在官网下载Vue.js的开发版本和生产版本，如图2.1所示，并通过<script>标签引入，此时Vue会被注册为全局变量。

当然也可以用NPM［Node Package Manager, Node包（依赖）管理工具］安装。

NPM最初用于管理和分发Node.js的依赖，它自动化的机制使得层层嵌套的依赖管理变得十分简单，因此后来被广泛应用于前端依赖的管理中。你需要在Node的官网下载Node客户端，同时，你会得到一个“附送的”NPM工具。

由于NPM的仓库源布置在国外，资源传输速度较慢且可能受制，这里，笔者不建议直接使用NPM安装其他依赖，而是使用淘宝镜像源的cnpm。

（1）安装cnpm：

     npm install -g cnpm --registry=https://registry.npm.taobao.org

（2）之后，使用cnpm安装Vue.js：

     cnpm install vue

（3）引入Vue模块：

     import Vue from 'vue'

2.1.2 安装Vue Devtools

在Vue学习和开发之前，笔者建议在你的浏览器（推荐使用Google Chrome）上先安装Vue Devtools拓展程序。Vue Devtools提供了一个界面，可以帮助我们查看Vue组件和全局状态管理器Vuex中记录的数据。

有条件访问国外受限网站的读者，可以直接访问Google Web Store，搜索vuejs-devtools进行安装。

没有条件的同学只好跟着笔者手动安装了。

（1）下载Vue Devtools（不了解Git的同学可以查看附录相关内容）。

     git clone https://github.com/vuejs/vue-devtools.git

（2）进入vue-devtools目录下，安装构建工具所需要的依赖。

     cnpm install

（3）构建工具，出现类似如图2.2中的信息即表示构建成功。

     npm run build

（4）打开Chrome扩展程序，如图2.3所示。

（5）在扩展程序界面中，开启“开发者模式”（“开发者模式”为关闭状态时，搜索栏下的按钮将被隐藏），并点击“加载已解压的扩展程序”，选择“shell/chome”文件夹进行安装，如图2.4所示。

（6）再次打开Vue项目时，我们就可以在Chrome调试工具中通过vue-devtools查看组件状态了，如图2.5所示。