浏览器安装Vue devtools

1、下载地址：

https://github.com/vuejs/vue-devtools

建议大家下载v5.1.1，这样中间出现错误比较少

 

2、点击下载zip后解压

3、打开cmd，这里希望大家以管理员的身份打开，防止出现不必要的报错

E:  可以直接切换到自己想要的盘，进入自己解压后的目录

安装并配置用cnpm使用淘宝镜像

cnpm是淘宝对国外npm服务器的一个完整镜像版本，也就是淘宝 npm 镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

 4、cnpm i 下载依赖,这里也可以使用yarn add或则npm i去下载，但是使用淘宝镜像会比较快。

我这里比较快是因为我已经下载过一遍，我是写博客为了截图重新演示

5、下载成功后执行那npm run build

6、然后进入 文件夹找到如下文件

  找到图片对应项改为true后保存文件

7、然后点击浏览器右上角三个点=>更多工具=>拓展工具=>选择加载已解压的拓展工具=>找到下图的文件选择即可

8、此时我们就可以再页面上看到l插件的ogo了，如果没有可以重启浏览器查看

9、我们进行以下操作把插件的标志订在浏览器上方。当我们打开一个项目的时候,如果此项目运用的是vue的框架此光标就会量，如果不是，它就是灰色的

因为这个插件比较常用，刚安装上的时候他是在配置项的最后一项，我们可以把它拖动到前面，方便使用。