win10下vue-devtools的安装和使用

网上关于vue-devtools的安装数不胜数，可是本身操做起来却老是遇到问题。

写下这篇随笔，以防之后忘记。

vue-devtools是一款基于chrome游览器的插件，用于调试vue应用，这能够极大地提升咱们的调试效率。固然网上教程确实多，很容易理解，可是新手操做实在会卡住。

这里介绍一篇，你们能够去看看https://blog.csdn.net/zhousen...。

我这里写下我安装的全过程，以及走过的弯路，及解决办法。

方法一：

chrome商店直接安装
vue-devtools能够从chrome商店直接下载安装，很是简单，这里就不过多介绍了。不过要注意的一点就是，须要FQ才能下载。

方法二：（主要讲方法二）

1、下载chrome扩展插件
GitHub下载地址：

https://github.com/vuejs/vue-...
这个下载的话：

下载zip格式的文件

2、解压到本地

记得看清楚文件的目录，等会须要访问到此目录，固然你也能够解压在c盘，不建议什么东西都往c盘扔；

3、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 检查版本，

4、cnpm install，npm run build 等操做
如今咱们能够回到vue-devtool的下载了。。。。。。记得须要进入本身下载解压文件的位置

虽然我也不知道是在干啥，可是我知道应该是成功了：

时间有点长，须要耐心等一等。。。。

cnpm install操做完成后进行npm run build

完成后显示：

而后进去到文件夹内，必定是shells下的chrome的manifest.json文件，

进入本地编辑器，作以下图修改，false 改为 true

5、扩展Chrome插件
打开chrome浏览器，打开设置>点击或者程序>点击开发者模式>加载已解压的扩展程序