在 Chrome 中以编译方式安装 vue-devtools
环境准备
- Git 环境
- NodeJs 环境(版本 v14.17.0)
- 镜像源设置
npm config set registry https://registry.npm.taobao.org npm config set disturl https://npm.taobao.org/dist npm config set electron_mirror https://npm.taobao.org/mirrors/electron/ npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/ npm config set phantomjs_cdnurl https://npm.taobao.org/mirrors/phantomjs/ - 安装 yarn
npm install yarn- 镜像源设置
yarn config set registry https://registry.npm.taobao.org -g yarn config set disturl https://npm.taobao.org/dist -g yarn config set electron_mirror https://npm.taobao.org/mirrors/electron/ -g yarn config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/ -g yarn config set phantomjs_cdnurl https://npm.taobao.org/mirrors/phantomjs/ -g - 安装 TypeScript
yarn global add typescript
vue-devtools 编译
编译命令执行环境： Git Bash 命令行窗口。原因是 Windows 下 cmd 命令窗口缺失 rm -rf 指令，会在构建过程中出错。
vue-devtools 版本：6.1.3。
- 从github 上下载 vue-devtools 项目源码: 下载地址
- 切换到 vue-devtools 项目目录
# 安装依赖 yarn install # 构建 yarn run build - 构建结果
- img_2.png
Chrome 安装插件
-
进入谷歌浏览器“扩展程序”设置，打开开发者模式，选择 shell-chrome 文件夹加载扩展程序，如下图：
- img_3.png
-
安装成功
- img_4.png
