Vue devtools工具安装 Chrome安装Vue devtools 教程步骤

一、安装步骤

        1、下载地址：GitHub - vuejs/devtools at v5.1.1

        2、注意： 必须使用 v5.1.1 版本，经测试这个版本正常使用

        3、安装步骤：

npm install / cnpm install

npm run build

        4、上述步骤，安装没报错后，可以看到会生成 devtools/shell 目录

        5、打开 chrome 浏览器，开启 开发者模式--- 加载已解压的扩展程序 --- 选择 devtools-5.1.1\shells\chrome

方式一：在谷歌浏览器地址栏中输入：chrome://extensions/
 
方法二： 右上角 --- 更多工具 --- 扩展程序 

        6、点击插件 "详情" --- 有权访问的网站 --- 在所有网站上

二、可能遇到的问题

        1、安装报错，请选择 v5.1.1 版本

        2、安装完成后devtool图标还是灰色的或者控制台根本就没有vue：

打开： vue-devtools\shells\chrome中的manifest.json 文件

将"persistent": false 改为 true 。

        已安装好的 vue-devtools 插件。

三、 5.1.1 以后版本安装

        1、比如 v5.3.4版本 ：

yarn install 

yarn run build

        2、获取到，安装后的内容： devtools-5.3.4\packages\shell-chrome ，后续按照步骤【一-5】操作即可。

        PS：为什么会写这篇文章，作为一个后端开发，初次接触Vue，下载最新的版本（v6.0.x），

再按照其他博客的教程（npm install），一直安装失败 ...

最根本的原因是： 我没有看官方的安装文档 ！！！

        比如问题： yarn 是干啥的？ yarn 和 npm 有啥区别呢？ 不知道 ！