【vue】vue-devtools安装使用

安装配置

1. github下载安装包 https://github.com/vuejs/vue-devtools
   
   在这里插入图片描述

2. yarn配置devtools，使用npm配置遇到一些问题，最后还是决定使用yarn配置
   若没有安装yarn，首先全局安装yarn

   npm install -g yarn
   

   使用前建议切换淘宝镜像

   yarn config set registry https://registry.npm.taobao.org --global
   yarn config set disturl https://npm.taobao.org/dist --global
   
   yarn config get registry （如果上面配置正确这个命令会输出淘宝镜像地址）
   

   开始配置插件，依次执行以下命令：

   yarn install
   yarn run build
   

   浏览器扩展程序配置
   chrome浏览器右上角三个点->更多工具->扩展程序->加载已解压的扩展程序->选择vue-devtools-dev\packages\shell-chrome文件夹确认添加
   
   

使用

完成以上配置原则上vue-devtools已经可以使用了。

若无Vue tab，尝试以下方式：

1. 重新打开chrome浏览器；
2. 在扩展程序里刷新或者关闭重新打开devtools；