首页 前端知识 Vue调式工具——vue-devtools插件下载安装 手把手教程!

Vue调式工具——vue-devtools插件下载安装 手把手教程!

2024-05-09 10:05:09 前端知识 前端哥 442 916 我要收藏

1.vue-devtools下载

官网:https://devtools.vuejs.org/guide/installation.html
大部分开发人员的首选都是Chrome浏览器,但是由于是国外服务器,因此在一些操作上都会是响应时间过长,比如我们下载vue-devtools;因此在官网上,我们选择GitHub下载Zip,就会非常快速与简单;
1.第一步:点击GitHub
在这里插入图片描述
2.第二步:点击code,选择Zip
在这里插入图片描述

2.构建vue-devtools工具插件

3.第三步:解压安装包
在这里插入图片描述
4.第四步:点击进入当前文件夹,然后进入当前目录的cmd窗口(点击目录栏->输入cmd->点击回车);在这里插入图片描述
点击回车进入命令窗口
在这里插入图片描述
5.第五步:依赖安装,命令:npm i
在这里插入图片描述
如果这部报错了,请参考文章:vue-devtools安装失败
6.第六步:构建vue-devtools工具插件;命令:npm run build;执行完成后会在shells下生成chrome文件夹。此文件夹就是用来放入chrome的扩展程序。
在这里插入图片描述

3.vue-devtools扩展配置

7.第七步:在Chrome中安装插件;
①打开浏览器,选择扩展程序;
在这里插入图片描述
②打开开发者模式,选择加载已解压的扩展程序;
在这里插入图片描述
③选择我们shells文件夹下的Chrome文件夹
在这里插入图片描述
然后就可以看到在扩展程序中有插件了;这样也就安装成功了!
在这里插入图片描述

转载请注明出处或者链接地址:https://www.qianduange.cn//article/7652.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!