工欲善其事, 必先利其器, 快快一起来用vue-devtools来调试开发你的vue项目吧

安装

1.到github下载：
首先本机电脑要安装git、node环境，然后到https://github.com/vuejs/vue-devtools中下载vue-devtools至本地，下载好了解压缩vue-devtools-dev包，点击进入vue-devtools-dev文件根目录

下载

2.在vue-devtools-dev目录下安装依赖包：
在vue-devtools-dev根目录中单击鼠标右键，点击Git Bash Here，如下图

安装依赖.png

后在git bash命令行中输入如下命令

cnpm install    //这里推荐使用cnpm安装（速度快），如果没有配置cnpm，请查阅相关资料自行配置

3.修改manifest.json文件：

路径.png

把"persistent":false改成true

修改配置文件.png
4.编译代码：

npm run build

5.扩展Chrome插件：
点击Chrome浏览器 > 更多程序 > 拓展程序 注意：不同版本浏览器拓展程序选项位置可能不一致
找到拓展程序，点击进入这个拓展程序面板，然后把vue-devtools-dev > shells > chrome拖入到此面板中, 安装成功如下图

添加扩展程序.png

6. vue-devtools使用：
   打开vue项目并运行，在浏览器中按F12，vue是数据驱动的, 这样就能看到对应数据了, 方便我们进行调试

   
   使用.png

止水
于沈阳
2019/03/27 09：19