360浏览器怎么下html,360浏览器怎么装vue-devtools插件?

360极速浏览器扩展程序中心并没有提供vue-devtools插件,因此需要自己安装。那么360极速浏览器怎么装vue-devtools插件?下面本篇文章给大家介绍一下。

7c4ca0b683f43617ac36bdb8a66b83c3.png

本文介绍方法适用于所有Chrome内核浏览器。

一.创建vue-devtools插件工程项目,编译生成插件安装包——如果你想自己创建工程、编译项目,那么从这里开始:

1.下载插件:

将vue-devtools的github项目拷贝到本地,用不惯git,也没安装软件,因此直接下载到本地:

33979e993ac3cc14b8fc9001b8833d97.png

2.解压代码包:

657a2dbccb49c0ef057fa4ba9f4731a2.png

3.安装项目需要的npm包:

Ctrl+R打开运行窗口,输入cmd,调起命令行窗口,切换到解压后的vue-devtools代码包目录,安装需要的npm包:npm install

31a75833ef1d58731e3a82f827289bd8.png

4.编译项目文件:npm run build

如果你想自己创建工程、编译项目,那么从这里开始:

二.将插件包添加到浏览器——如果你已经有了插件包,那么直接从这里开始:

浏览器中输入“chrome://extensions”,进入程序扩展界面,点击选中右侧的”开发者模式“选项;

5bc7765f0d3112cb5c92672069e20c4a.png

在其下边弹出的界面中点击”加载已解压的扩展程序..."按钮:

15680c601975c6d27823677dbd0faf24.png

在弹出的弹窗中选择插件解压的目录,选择chrome目录,如下图所示:

0c2586635ffa33a10ea2e94cca3ee33b.png

点击确定,能看到右上角扩展程序这里已经多了一个vue-devtools扩展程序图标了:

ecab115b3fe98651a1f891237a2e9ec0.png

6.测试插件:

本地编译运行vue项目,能看到浏览器调试器这里已经有vue-devtools的相关模块了:

486f5b0f728178a16dfcf9b12224fc25.png

后记:

本方法是Chrome内核浏览器通用,所以谷歌浏览器也可以直接使用。可以将打包后端chrome目录单独提取出来保存到U盘或者网盘,以后就可以直接使用而无需再创建工程编译了。

更多vue.js相关知识,可访问 Vue.js答疑 栏目!!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值