Vue-devtools谷歌插件安装

• • • 第一步
    • 第二步
    • 第三步
    • 第四步
    • 第五步

由于登不了谷歌的应用商店，所以很多插件安装起来都比较麻烦，自己安装vue-devtools也摸索了将近一天。

vue官方文档介绍 https://v3.cn.vuejs.org/guide/installation.html#vue-devtools

第一步

首先需要把插件github上的项目拉取下来

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

注意：需要指定版本号，若直接clone拉下来的是开发分支，直接打包会报错。

另外
也可以选择上github下载压缩包

在右边选择发布版本

点击下载安装包解压。

第二步

打开文件目录 /packages/shell-chrome/下的manifest.json文件，将persistent属性设置为true。

persistent属性定义了常驻后台的方式——当其值为true时，表示扩展将一直在后台运行，无论其是否正在工作；当其值为false时，表示扩展在后台按需运行。

第三步

运行 npm install安装依赖，再运行yarn install安装依赖。
注意：必须两个命令都要运行，不然打包时会出错module xxx not found。

第四步

运行npm run build打包。
若打包出错，建议删除node_module文件夹和package-lock.json文件，重新进行第三步操作。

第五步

打包成功后，打开谷歌输入chrome://extensions/进入拓展程序管理界面。选择加载已解压的扩展程序。

文件夹选择 /packages/shell-chrome/后点击确定。就成功加载Vue-devtools插件。
用法：F12打开开发者工具，点击>>下拉框选择vue。