【vue】chrome插件Vue Devtools的安装和使用

Vue Devtools、node.js和vue.js的下载地址如下：
https://download.csdn.net/download/qq_22889875/11430017
安装Vue Devtools之前首先要安装node.js配置环境变量
1、双击node.js安装包，根据安装提示一步一步安装即可；
2、配置环境变量，加入node.js的安装目录，我的目录是：E:\study\node.js，如下图

3、配置完成后打开cmd命令窗口，输入node --version，可查看到node版本信息，说明node.js安装成功！

4、解压vue-devtools-master，进入该文件夹目录，在如下标记界面去掉红框中的路径然后输入"cmd"回车，即可进入该文件夹下的cmd命令界面

cmd界面，可以看到已经进入该目录下：

5、开始安装Vue Devtools
1）npm install 这个指令比较慢，npm访问国外的资源会慢点，推荐使用淘宝维护的cnpm
指令改为：npm install -g cnpm --registry=https://registry.npm.taobao.org 秒装，我是先使用npm发现太慢了，所以最后用的淘宝维护的cnpm
2）修改manifest.json文件
这个文件在vue-devtools-master\shells\chrome下，打开后将false改成true

3）cnpm run build 编译成功
4）打开谷歌浏览器，地址栏输入chrome://extensions/即可进入扩展程序页面，勾选开发者模式，将vue-devtools-master\shells下的chrome文件直接拖到页面上即可，Vue Devtools完成


在谷歌浏览器中按F12，如图，Vue Devtools插件安装成功！注意，只有在运行vue相关项目时下图才会有vue图标出现