vue3 devtools 本地安装指南

前言： 由于没有FQ 环境， vue devtools
只能通过本地安装的方式。参考网上不少教程，走了许多弯路，特此记录一下成功的安装方式。

1.安装

a. 来到 github官网，选择最新的分支下载代码
https://github.com/vuejs/devtools

b. gitclone到本地

c. 依次执行下面的 yarn 命令

# 如果没有安装yarn的话  
# 不知道自己是否安装 可以通过 yarn -v 查看一下
# 安装Vue-Devtools的依赖需要用到yarn，而不是npm，所以首先我们要安装yarn。命令行进入到解压后的Vue-Devtools目录。
npm install -g yarn   

yarn install

yarn run build:watch

yarn run dev:chrome

有如下的输出 说明 vue devtools 已经安装成功
（整个命令行执行过程较慢，笔者等待了1小时左右，上述步骤才全部完成）

2. 使用

打开devtools所在文件夹，可以看到 packages\shell-chrome 下有build 文件了

在chrome浏览器 - 扩展程序 - 加载已解压的扩展程序 - 选择 devtools/packages/shell-chrome 文件夹


此时 chrome - 扩展程序 - 多了vue devtools的图标 - 添加devtools 成功

3.使用

运行vue项目

F12 有 vue Tab栏 vue devtools 安装成功！