# 安装 vue-devtools
vue-devtools 是一款基于 chrome 游览器的插件，用于调试 vue 应用，这可以极大地提高我们的调试效率。
vue-devtools 可以从 chrome 商店直接下载安装，非常简单，不过对于国内程序员而言，通过这种方式安装并不太现实。因此，大多都是通过源码编译，手动安装。
vue-devtools 的安装需要 Yarn（进行编译），因此，在安装 vue-devtools 前需要先安装 Yarn 。
注意
你也可以不安装 yarn 来进行编译 vue-devtools，直接找老师要一份 shell-chrome 即可！
# Step 0：安装 Yarn
作为包管理器，NPM 不是没有竞争对手。Yarn 就是后起之秀。有意思的是，可以通过 NPM 来安装 Yarn 。
为了减少初学时混用两个包管理工具所带来的混乱，我们仅在编译 vue-devtools 时使用 yarn，其他场景（虽然可以，但是）我们仍使用 NPM 。
通过 npm 安装 yarn：
npm install -g yarn
安装完毕后，可直接执行 yarn -v 命令查看 yarn 的版本，以验证是否安装成功。
查看 yarn 的中央仓库网址：
yarn config get registry修改 yarn 的中央仓库网址：
yarn config set registry http://registry.npm.taobao.org/查看 yarn 全局安装的命令的源码路径和二进制执行文件路径：
yarn global dir yarn global bin
注意，和 npm 一样，这两个路径和局部安装无关。
# Step 1：下载 vue-devtools
从 github 上下载 vue-devtools 。
git clone https://github.com/vuejs/vue-devtools.git
记住你所下载的 vue-devtools 的本地路径，接下来你要进入到这个目录中，执行后续操作。
# Step 2：编译 vue-devtools
进入到 vue-devtools 目录，执行安装命令：
yarn install
安装过程会执行一段时间（1+ 分钟），请耐心等待。
install 命令执行结束后，执行编译命令：
yarn run build
编译结束后，你的 vue-devtools 目录下会出现一个名为 packages 的文件夹，在这个文件夹中，又有一个名为 shell-chrome 的文件夹。记住这个 shell-chrome 文件夹，未来我们要是用到它。
# Step 3：Chrome 安装 vue-devtools
找到 packages 文件夹，这个文件夹下会有一个 shell-chrome 文件夹。
打开 Chrome 的『更多工具』下的『扩展程序』。
查看，并确保右上角的『开发者模式』 是打开的。
点击左侧的『加载已解压的扩展程序』，在弹出的窗口中，选中上述的『shell-chrome』目录，点击确定。安装结束。
安装成功后是这样的：
点击上图的
详细信息进入瞅一眼，确保允许访问文件网址开关是打开的。
在地址栏右侧固定 vue-devtools，以方便使用。
固定后，是这样的：
当你打开任意一个使用了 vue 的页面时，会看到上图的 vue-devtools 图标亮起来：
如果 vue-devtools 图标没有亮起来，原因见最后。
在你的
更多工具>开发者工具中，你会发现多出来一个 vue 选项：
如果你的
开发者工具中没有多出来一个 vue 选项，原因见最后。你将看到 vue-devtools 工具展现的该页面的 vue 相关信息：
当你打开 vue 页面时
- vue-devtools 图标没有亮起来，或者
- 在
开发者工具下死活找不到多出来的 vue 选项
你点击 vue-devtools 图标，会出现如下图提示信息：
这是因为，要使用 vue-devtools 的前提是，你的页面所使用的『vue.js 必须是开发版』，而不是生产版。因为 vue-devtools 所展示的信息的来源，来源于 vue.js 开发版『额外』的功能和信息。
检查你的页面上所引入的 vue.js：
<!-- 这引入的是 vue.js 的开发版本。用它，用它，用它。-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<!-- 这引入的是 vue.js 的生产版本。
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
-->
『完』