网上关于 vue-devtools 的安装数不胜数，但是自己操作起来却总是遇到问题。
写下这篇随笔，以防以后忘记。
vue-devtools 是一款基于 chrome 游览器的插件，用于调试 vue 应用，这可以极大地提高我们的调试效率。当然网上教程确实多，很容易理解，但是新手操作实在会卡住。
这里介绍一篇，大家可以去看看 https://blog.csdn.net/zhousen…。
我这里写下我安装的全过程，以及走过的弯路，及解决办法。
方法一：
chrome 商店直接安装 vue-devtools 可以从 chrome 商店直接下载安装，非常简单，这里就不过多介绍了。不过要注意的一点就是，需要 FQ 才能下载。
方法二：（主要讲方法二）
一、下载 chrome 扩展插件 GitHub 下载地址：
https://github.com/vuejs/vue-… 这个下载的话：
下载 zip 格式的文件
二、解压到本地
记得看清楚文件的目录，等会需要访问到此目录，当然你也可以解压在 c 盘，不建议什么东西都往 c 盘扔；
三、win+r 输入 cmd 打开命令行操作为了方便新手，cmd 也敲出来；
像很多操作都是 cnpm install，npm install，npm run build 等操作；等下再介绍，先进入我们解压文件的目录：
进入后输入 cnpm install；可以看下，会有错误，当然如果你下载了 npm，cnpm，自然不会报错；
之前卡这里很久，到处找，没有找到，毕竟新手。
npm：node.js 下的包管理，下载 node.js 会附带 npm。然后我又跑去找 node.jsde 的下载方法。介绍大家可以去看这个
node.js 下载博客：
https://www.cnblogs.com/goldl…node.js 的下载网址：
http://nodejs.cn/download/ 由于我的电脑是 64 位的 windows 系统；
下载完成后，双击安装
一路 next，到了安装目录后，默认 C 盘，（建议改成 D 盘，自己新建的目录）
我的是 D 盘，nodejs，选好后点击 next。
这里需要主要，点击 add to path, 不需要配置环境，不然又得去操作环境配置，还有这边下载安装完成后，不要随便改变文件夹，不然得重新配置环境变量。。。。。点击 next，install，finish。。。
下载完成后会在你的文件夹有：那个.msi 是我之前下的，可以删除
现在可以去操作 npm 了，记得重新打开命令行，首先查看环境变量，会发现自动配好了 node，和 npm，你会发现现在两个居然不在同一个文件夹
输入 node -v，npm - v 可以查看刚才下载的 node，npm 的版本；注意不要忘记输入空格。
现在只是安装了 npm，还有 cnpm 需要安装
输入这个命令：npm install -g cnpm –registry=https://registry.npm.taobao.org
输入：cnpm -v 检查版本，
四、cnpm install，npm run build 等操作 现在我们可以回到 vue-devtool 的下载了。。。。。。记得需要进入自己下载解压文件的位置
虽然我也不知道是在干啥，但是我知道应该是成功了：
时间有点长，需要耐心等一等。。。。
cnpm install 操作完成后进行 npm run build
完成后显示：
然后进去到文件夹内，一定是 shells 下的 chrome 的 manifest.json 文件，
进入本地编辑器，做如下图修改，false 改成 true
五、扩展 Chrome 插件打开 chrome 浏览器，打开设置 > 点击或者程序 > 点击开发者模式 > 加载已解压的扩展程序