vue-devtools的安装与使用

本是古典何须时尚 2022-05-14 07:06 110阅读 0赞

# vue-devtools的安装与使用 #

一.在github上下载压缩包，github下载地址：https://github.com/vuejs/vue-devtools

二.解压到本地的某盘

三.用你的npm中进入该文件夹下

四.依次输:

1:npm install  （如果在这部报错的话，就改用cnpm install。  cnpm需要安装 [安装地址][Link 1]）

2**:npm run build**         (这一步一定不要忘了，没有执行这一步的话，项目文件夹shells>chrome文件夹里会少一个src文件夹,如下图)

![vue-devtools的安装与使用][vue-devtools]

五：修改shells>chrome文件夹下的mainifest.json 中的persistant为true

![vue-devtools的安装与使用][vue-devtools 1]

六：我们找到谷歌浏览器的扩展程序功能，勾选开发者模式，然后我们将插件文件夹里的shells>chorme文件夹直接拖到页面中，完成安装。

（注意：如果我们没有执行第四部的npm run build，在这里会报错：无法加载背景脚本"build/background.js"）

七：在插件的目录下执行npm run dev，这个时候我们的插件就可以运行了,打开localhost:8080可以看到插件已经安装并运行了。

![vue-devtools的安装与使用][vue-devtools 2]

八：我们在打开本地的其他项目时，就**不需要**在vue-devtools文件夹下执行npm run dev了，因为这个插件已经安装在浏览器中。接下来就愉快的调试你的vue项目吧。

更新：如果后期vue面板不出来，再到vue-devtools文件夹下执行一遍npm run dev。

[Link 1]: https://npm.taobao.org/
[vue-devtools]: /images/20220514/4c88fbdb52914307be5bf6f88a5f9df5.png
[vue-devtools 1]: /images/20220514/6c34cfb68f8644b4ba29890cdb1d2429.png
[vue-devtools 2]: /images/20220514/433da27640f44e099f06754778226956.png

发表评论取消回复

表情：

评论列表（有 0 条评论，110人围观）

还没有评论，来说两句吧...

相关阅读

相关 vuedevtools插件安装

目前vuedevtools插件安装主要有三种方式，选择适合自己的方式即可 1.在线安装众所周知，国内网络环境比较难按，如果能安的话还是推荐在线安装在线安装地址：[ht

ゝ一纸荒年。/ 2023年01月21日 14:26/ 0 赞/ 325 阅读

相关 nmon的安装与使用

author：skate time：2011/08/06 \_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\

不念不忘少年蓝@/ 2022年06月17日 23:36/ 0 赞/ 247 阅读

相关 tomcat的安装与使用

1.tomcat下载官网：[http://tomcat.apache.org/][http_tomcat.apache.org]。 2.Download->选择version

悠悠/ 2022年06月02日 07:11/ 0 赞/ 209 阅读

相关 lombok 的安装与使用

lombok使用(常用的几个注释) 1 @Data 注解在类上面，省略所有的get set equal toString方法 2 @Getter 注解在属性上，省略

一时失言乱红尘/ 2022年04月14日 03:15/ 0 赞/ 474 阅读

相关 Scala的安装与使用

windows下安装：第一步：安装jdk,并在环境变量中配置好；第二步：下载scala。你下载的可能是安装文件，也可能是解压文件，安装文件直接双击即可以，如果是解压的

阳光穿透心脏的1/2处/ 2022年04月04日 11:43/ 0 赞/ 268 阅读

相关 git的安装与使用

git的安装与使用 Git官网：[https://git-scm.com/][https_git-scm.com] 下载：[https://git-scm.com/do

布满荆棘的人生/ 2022年04月02日 11:45/ 0 赞/ 346 阅读

相关 Mongodb的安装与使用

目前版本的 mongodb （4.0）只支持win7、win8和win8.1，对于win10是不支持的，若是需要在win10上面安装与运行，需要在windows官网下载相应的w

Dear 丶/ 2022年02月05日 04:49/ 0 赞/ 360 阅读

相关 hyperv的安装与使用

微软的服务器系统一般都自带了hyperv的功能，PC端从win10开始也内置了hyperv的功能，都通过管理工具直接安装即可。共享Linux文件系统可以通过samba实现的

ゝ一纸荒年。/ 2022年01月20日 00:53/ 0 赞/ 328 阅读

相关 nrm的安装与使用

nrm的作用：提供了一些最常用的NPM包镜像地址，能够让我们快速的切换安装包时候的服务器地址；，我们依旧使用的事npm的命令，只是镜像地址变了什么是镜像：原来包刚一开始是只

痛定思痛。/ 2021年11月09日 18:56/ 0 赞/ 449 阅读

相关 yarn的安装与使用

转自：http://blog.csdn.net/guoquanyou/article/details/61199935 仅用于学习，不可商用在Nodejs环境下

待我称王封你为后i/ 2021年09月15日 00:18/ 0 赞/ 577 阅读