1. github官网下载vue工具:https://github.com/vuejs/vue-devtools。并解压
2. 在有package.json的文件夹下,按住shift右键,选择“在此处打开CLI” 执行 cnpm i (没装镜像用 npm i)
![](https://img-blog.csdnimg.cn/img_convert/bcf5c3e39f068864ae661a269f4014da.png)
3. node_modules安装完毕后,在命令行输入 cnpm run build (npm 也可以)
4. 打开谷歌浏览器,地址栏输入:chrome://extensions/ (找出扩展插件页面)
![](https://img-blog.csdnimg.cn/img_convert/2a142a84743575f03c934750e70b816e.png)
5. 选中 “开发者模式”
![](https://img-blog.csdnimg.cn/img_convert/4aa4f3f07416760e9ad6232b3eb33129.png)
6. 把刚才插件文件夹下 shells下的chrome直接拖过来,拖到 谷歌浏览器 的 扩展程序 页面,
![](https://img-blog.csdnimg.cn/img_convert/f294799bae5ce3374c18ce55e2fad7cc.png)
![](https://img-blog.csdnimg.cn/img_convert/de9f39df3886d05f939e511706540944.png)
安装完毕
谷歌浏览器右上角也会有图标:
![](https://img-blog.csdnimg.cn/img_convert/ac90cfe7ae83bd983fa479a4f3e806d1.png)
7. 在自己的vue项目下,跑一下vue的 npm run dev 后,复制命令行提示的地址
![](https://img-blog.csdnimg.cn/img_convert/0c49c6ca81dff5a1148736df1a290e40.png)
8. 在谷歌中打开
9. F12打开开发者工具
10. 选择角落里的这个Vue,就可以使用了
![](https://img-blog.csdnimg.cn/img_convert/7fb7496e6c6ad33b68e9ad3bd8e377d4.png)