编译安装 vue-devtools

vue-devtools 是一款基于 chrome 游览器的插件，用于调试 vue 应用，这可以极大地提高我们的调试效率。

vue-devtools 可以从 chrome 商店直接下载安装，非常简单，不过对于国内程序员而言，通过这种方式安装并不太现实。因此，大多都是通过源码编译，手动安装。

vue-devtools 的安装需要 Yarn<small>（进行编译）</small>，因此，在安装 vue-devtools 前需要先安装 Yarn 。

::: warning 注意
你也可以不安装 yarn 来进行编译 vue-devtools，直接找老师要一份 shell-chrome 即可！
:::

Step 0：安装 Yarn

作为包管理器，NPM 不是没有竞争对手。Yarn 就是后起之秀。<small>有意思的是，可以通过 NPM 来安装 Yarn 。</small>

为了减少初学时混用两个包管理工具所带来的混乱，我们仅在编译 vue-devtools 时使用 yarn，其他场景<small>（虽然可以，但是）</small>我们仍使用 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

安装过程会执行一段时间<small>（1+ 分钟）</small>，请耐心等待。

install 命令执行结束后，执行编译命令：

yarn run build

编译结束后，你的 vue-devtools 目录下会出现一个名为 packages 的文件夹，在这个文件夹中，又有一个名为 shell-chrome 的文件夹。记住这个 shell-chrome 文件夹，未来我们要是用到它。

Step 3：Chrome 安装 vue-devtools

1. 找到 packages 文件夹，这个文件夹下会有一个 shell-chrome 文件夹。

2. 打开 Chrome 的『更多工具』下的『扩展程序』。

   vue-devtools-1

3. 查看，并确保右上角的『开发者模式』 是打开的。

   vue-devtools-2

4. 点击左侧的『加载已解压的扩展程序』，在弹出的窗口中，选中上述的『shell-chrome』目录，点击确定。安装结束。

   vue-devtools-3 vue-devtools-4

4. 安装成功后是这样的：

   vue-devtools-5

5. 点击上图的 详细信息 进入瞅一眼，确保 允许访问文件网址 开关是打开的。

   vue-devtools-6

6. 在地址栏右侧固定 vue-devtools，以方便使用。

   vue-devtools-7

   固定 后，是这样的：

   vue-devtools-8

7. 当你打开任意一个使用了 vue 的页面时，会看到上图的 vue-devtools 图标亮起来：

   vue-devtools-9

   如果 vue-devtools 图标没有亮起来，原因见最后。

8. 在你的 更多工具 > 开发者工具 中，你会发现多出来一个 vue 选项：

   vue-devtools-10

   如果你的 开发者工具 中没有多出来一个 vue 选项，原因见最后。

9. 你将看到 vue-devtools 工具展现的该页面的 vue 相关信息：

   vue-devtools-11

---

当你打开 vue 页面时

• vue-devtools 图标没有亮起来，或者
• 在 开发者工具 下死活找不到多出来的 vue 选项

你点击 vue-devtools 图标，会出现如下图提示信息：

vue-devtools-12

这是因为，要使用 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>
-->