网上看了很多教程,但是大多都有问题,上下文矛盾的那种,这一篇是我安装完成后写的。

一、准备工具

在安装dectools之前我们需要先安装node.js ,准确来说是工具npm。这一步大家自行查找,网上的内容都比较全面。

二、下载devtools工具安装包

github的下载地址:https://github.com/vuejs/vue-devtools
这个就是官方的下载地址,大家可以放心下载。
在这里插入图片描述

下载好后解压到本地文件夹,记得务必解压。
打开cmd窗口,从cmd中进入解压的vue-devtools-master文件夹
接下来有两个选择:

①直接输入指令npm install安装依赖包。
但是通常npm都会因为时间过长而报错,因此我们可以选择先安装国内镜。

②输入以下指令安装国内镜像文件:
npm install -g cnpm --registry=https://registry.npm.taobao.org
结束后输入cnpm -v检查版本确认是否安装成功,这一步也结束后输入指令:
cnpm install安装依赖包。
在这里插入图片描述
出现这样的界面我们可以进入下一步。
输入指令npm run build
在这里插入图片描述
到这我们的依赖包就安装完成了,接下来主要就是将插件导入谷歌浏览器了。

三、配置谷歌浏览器

进入vue-devtools-master->shells->chrome,配置manifest.json文件。

右击打开manifest.json文件(记事本格式或者其他能打开的软件都行)找到persistent 将状态改成true(默认false)

在这里插入图片描述
然后打开chrome浏览器将它添加到拓展程序中。
打开谷歌浏览器设置****——>扩展程序
在这里插入图片描述
打开右上角开发者模式
在这里插入图片描述
点击加载已解压的扩展程序
进入vue-devtools-master->shells->chrome,选择chrome文件夹。
在这里插入图片描述
最后在浏览器右上角看到vue图标代表完成。

安装过程中有任何问题都可以评论区留言或私信我,看到后一定尽力帮忙解答。

Logo

前往低代码交流专区

更多推荐