谷歌浏览器如何安装vue调试工具
2018-07-12 本文已影响2899人
涼涼_570e
1.先将命令行中默认的npm安装切换成cnpm (原因:用npm安装太慢啦!!!)
步骤:打开命令行,将 npm install -g cnpm --registry=https://registry.npm.taobao.org 复制进去,按回车键
![](https://img.haomeiwen.com/i13131051/426f19ee83e093a4.png)
2.登录github官网下载vue-devtools压缩包
github网址:https://github.com/vuejs/vue-devtools
3.将下载的压缩包解压,并通过命令行进入vue-devtools-master文件夹中
![](https://img.haomeiwen.com/i13131051/15478ec1c1690bd0.png)
3.输入安装命令 cnpm install
![](https://img.haomeiwen.com/i13131051/295a0f2847367727.png)
4.安装完成后进行编译 ,在命令行中输入 cnpm run build
![](https://img.haomeiwen.com/i13131051/1f0fcb3f4fcf1bfe.png)
![](https://img.haomeiwen.com/i13131051/20156a27c5c7a532.png)
5.编译完后,找到 vue-devtools-master\shells\chrome 文件夹下的manifest.json 文件,将"persistent": false 改成"persistent": true
![](https://img.haomeiwen.com/i13131051/b176658d0e52bd7b.png)
6.打开谷歌浏览器,找到 更多工具 => 拓展程序点开,勾选“开发者模式”,点击“加载已解压的拓展工具”,选择 vue-devtools > shells > chrome ,导入调试工具包
![](https://img.haomeiwen.com/i13131051/c3d16c535aecd133.png)
点击“确定”,即可成功导入vue调试工具
![](https://img.haomeiwen.com/i13131051/e9912266cd563977.png)
运行vue项目后,地址栏后边的vue图标会被点亮,则表示安装成功
![](https://img.haomeiwen.com/i13131051/722a383a1df9799e.png)
切记:安装完成后要重新打开浏览器才可以用!!!!