vue-devtools 编译安装

先从Github 拉源码

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

编译 vue-devtools

1. 安装yarn

npm install yarn -g

将yarn添加淘宝源#设置永久镜像

yarn config set registry https://registry.npm.taobao.org

2. 安装项目的全部依赖

切换到vue-devtools目录下

yarn install

此时yarn install 卡在安装Electron上

[5/5] Building fresh packages...
[-/4] ⠄ waiting...                                                                                                   
[-/4] ⠄ waiting...                                                                                                      
[4/4] ⠄ electron  

按照此作者方法，
打开C盘下的用户目录，找到~/.yarnrc文件，将lastUpdateCheck 删掉：

registry "https://registry.npm.taobao.org"
electron_mirror "https://npm.taobao.org/mirrors/electron/"
lastUpdateCheck 1549116918628 # 删掉 删掉

yarn install 成功了！

3. 打包 vue-devtools 插件

yarn run build

我们打包好的内容在目录 E:\vue-devtools\packages\shell-chrome 此时，已经可以直接安装。
crx其实只是个动了手脚的zip

4. 安装 chrome 扩展（加载已解压的扩展程序）

我们打包好的内容在目录vue-devtools\packages\shell-chrome 此时，已经可以直接安装。
在谷歌浏览器->更多工具->拓展程序->打开开发者模式，点击加载已解压的拓展程序，选择vue-devtools\packages\shell-chrome ，加载成功后如下图所示。