vue学习:chrome 中 vuetools 开发插件 的下载、安装

简介: 这篇文章介绍了如何在Chrome浏览器中下载、安装并测试Vue.js开发插件——vue-devtools。

以前也做过,但老是忘记,这次吉林一下

一、下载

  1. 百度云地址双手奉上

    链接:https://pan.baidu.com/s/1u3PXqq7kgxLG6YDv3Y6Zmg 
    提取码:shva 
    复制这段内容后打开百度网盘手机App,操作更方便哦
    
  2. 下载chrome扩展插件。
    在github上下载压缩包并解压到本地,github下载地址:https://github.com/vuejs/vue-devtools,打开后,进入到 master 分支,在下载或者拉取
    在这里插入图片描述

  3. 解压后如下所示:
    在这里插入图片描述

二、安装

  1. 打开命令行cmd进入vue-devtools-master文件夹
  2. npm install,安装依赖包;如果安装太慢,请使用淘宝镜像,此处不再赘述。
  3. npm run build
    在这里插入图片描述
  4. npm run build 执行完,则进行构建完成,并找到shells/chrome文件夹;
    在这里插入图片描述
  5. 打开shells>chrome>manifest.json并把json文件里的"persistent":false改成true
    在这里插入图片描述

三、加载到Google

  1. 扩展chrome插件
  2. 打开chrome浏览器,打开右上角三点>更多工具>扩展程序
  3. 再点击加载已解压的扩展程序,然后把shells>chrome文件夹放入,即可
    在这里插入图片描述

四、测试

写了一个 vue 的 helloworld ,然后打开开发者模式,有个vue模块,则说明 插件安装成功。如图所示
在这里插入图片描述

安装vue的Google插件 到此结束。

相关文章
|
1天前
|
Web App开发 Windows
win 快捷键大全,虚拟窗口、桌面等操作细节,可以使界面整洁,分类工作;Chrome快捷键,都是一些开发的骚操作
这篇文章提供了Windows操作系统和Chrome浏览器的快捷键大全,以及Xshell的快捷键操作,旨在帮助用户提高工作效率和界面管理。
10 2
|
2月前
|
Web App开发 存储 前端开发
《Chrome谷歌插件Top10》开发最好用的谷歌插件
本文介绍了多个实用的浏览器插件及其安装方法。包括CSDN浏览器助手,提供高效开发工具;FeHelper,前端必备工具,支持格式化、压缩等功能;uBlock Origin,有效屏蔽广告和弹窗;PageLiner,网页标尺工具,便于前端设计;Fatkun,批量下载图片;Smallpdf,文件转换工具;Octotree,GitHub代码树插件;Awesome Screenshot,截图与录屏工具;ColorZilla,颜色拾取器;Dark Reader,暗黑模式阅读插件。安装方式有通过Chrome商店搜索或下载crx插件本地安装。
57 11
|
2月前
|
Web App开发 JSON 前端开发
30个Chrome 灵魂插件!
30个Chrome 灵魂插件!
|
2月前
|
Web App开发 JSON 安全
【跨域难题终结者】:一键解锁Chrome浏览器神秘设置,彻底告别开发阶段的跨域烦恼!
【8月更文挑战第20天】跨域是前端开发常遇难题,尤其在前后端分离项目中。浏览器因安全考量会阻止不同源间的请求。本文对比CORS、JSONP、代理服务器等解法,并介绍开发阶段通过调整Chrome设置来临时禁用跨域限制的方法,提供启动Chrome及使用`fetch`API示例,适合快速测试。但请注意这不适用于生产环境,存在一定安全风险。
378 1
|
2月前
|
Web App开发
Chrome 护眼模式 - 黑暗模式 - 夜眼(Night Eye) 插件
Chrome 护眼模式 - 黑暗模式 - 夜眼(Night Eye) 插件
73 0
Chrome 护眼模式 - 黑暗模式 - 夜眼(Night Eye) 插件
|
1月前
|
Web App开发 数据采集 存储
WebDriver与Chrome DevTools Protocol:如何在浏览器自动化中提升效率
本文探讨了如何利用Chrome DevTools Protocol (CDP) 与 Selenium WebDriver 提升浏览器自动化效率,结合代理IP技术高效采集微博数据。通过CDP,开发者可直接操作浏览器底层功能,如网络拦截、性能分析等,增强控制精度。示例代码展示了如何设置代理IP、cookie及user-agent来模拟真实用户行为,提高数据抓取成功率与稳定性。适用于需要频繁抓取互联网数据的应用场景。
216 3
WebDriver与Chrome DevTools Protocol:如何在浏览器自动化中提升效率
|
1天前
|
Web App开发 JSON 安全
Chrome浏览器的跨域问题
【10月更文挑战第6天】
|
6天前
|
Web App开发 缓存 安全
Chrome浏览器启动参数大全
这是一组用于定制浏览器行为的命令行参数,包括但不限于:不停用过期插件、放行非安全内容、允许应用中心脚本、停用GPU加速视频、禁用桌面通知、禁用拓展及各类API、调整缓存设置、启用打印预览、隐身模式启动、设定语言、使用代理服务器、无头模式运行等。通过这些参数,用户可以根据需求灵活调整浏览器功能与性能。
|
1月前
|
Web App开发 存储 前端开发
Chrome浏览器的跨域问题
Chrome浏览器的跨域问题
|
2月前
|
Web App开发
Chrome——谷歌浏览器chrome如何模拟其他客户端
Chrome——谷歌浏览器chrome如何模拟其他客户端
89 1
Chrome——谷歌浏览器chrome如何模拟其他客户端

热门文章

最新文章