下载、编译、安装、使用 vue-devtools

这篇具有很好参考价值的文章主要介绍了下载、编译、安装、使用 vue-devtools。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

不少人都想下载 vue-devtools插件,但又不会做,今天我做个比较详细的笔记

查看当前的devtools的版本可以去这个网站看右侧的个v几点几的,就是版本号

https://github.com/vuejs/devtools

目录

第一个方法:使用极简插件

第一步:查找极简插件

第二步:搜索vue-devtools

 第三步:点击推荐下载

第四步:解压安装​​​​​​​

第二个方法:在github下载

第一步:下载yarn(未下载yarm的从这开始)

第二步:验证yarn是否安装成功

第三步:再次查看yarn是否正常使用

第四步:从hithub下载devtools(已下yarn可直跳到这步)

 第五步:找到evtools文件夹的路径

 第六步:初始化

 第七步:解包

 第八步:安装

第九步:使用


第一个方法:使用极简插件

这个方法比第二个方法简单的多,但不是官网放上去的,只是别把编译好的文件放上来方便我们使用

第一步:查找极简插件

通过下面的链接去极简插件网站

极简插件

第二步:搜索vue-devtools

搜索vue就出来了,搜索vue-devtools(以前可以)反而出不来,网站版本不一样,情况可能不一样

vue devtools插件下载,vue.js,前端,javascript,chrome devtools

 第三步:点击推荐下载

vue devtools插件下载,vue.js,前端,javascript,chrome devtools

第四步:解压安装

解压下载的文件后按下面的步骤进行,

这也可能会不一样,不过可以统一到设置里找到扩展程序也行

vue devtools插件下载,vue.js,前端,javascript,chrome devtools

vue devtools插件下载,vue.js,前端,javascript,chrome devtools

vue devtools插件下载,vue.js,前端,javascript,chrome devtools

然后把解压好的文件拖动到浏览器扩展程序内就行了,后面就是和第二个方法的使用步骤是一样的。

第九步:使用

第二个方法:在github下载

这个是查看了简书的出处的,本人只是做一个补充,或直观点感受

作者:hemiao3000
链接:编译安装 vue-devtools
来源:简书

本人使用的node是 -- 16.17.1  版本

下载yarn是 -- 1.22.19 版本

下载vue-devtools是 -- 6.4.4 版本

注:后面有对应的图片教程,一步步来就行

第一步:下载yarn(未下载yarm的从这开始)

编译安装 vue-devtools要用到yarn

打开cmd 或  windows PowerShell,建议是打开windows PowerShell(不要说你不会打开)

知道要用这个插件的应该都下载过node了,而node自带npm

npm install -g yarn

第二步:验证yarn是否安装成功

安装完毕后,可直接执行 yarn -v 命令查看 yarn 的版本,以验证是否安装成功

 yarn -v 

第三步:再次查看yarn是否正常使用

查看 yarn 全局安装的命令的源码路径和二进制执行文件路径:

yarn global dir
yarn global bin

注意,和 npm 一样,这两个路径和局部安装无关。

然后是 Vue.js devtools 下载编译安装使用发

第四步:从hithub下载devtools(已下yarn可直跳到这步)

  git clone https://github.com/vuejs/vue-devtools.git  

 第五步:找到evtools文件夹的路径

这一步有可能一些人路径不是这个,要自己找

 cd C:\Windows\System32\vue-devtools

 第六步:初始化

 yarn install

 图片中把第一步分为三步

vue devtools插件下载,vue.js,前端,javascript,chrome devtools

 第七步:解包

 yarn run build

vue devtools插件下载,vue.js,前端,javascript,chrome devtools

 第八步:安装

只要完成上面的,下面的问题就不大了

vue devtools插件下载,vue.js,前端,javascript,chrome devtools

vue devtools插件下载,vue.js,前端,javascript,chrome devtools

 vue devtools插件下载,vue.js,前端,javascript,chrome devtools

vue devtools插件下载,vue.js,前端,javascript,chrome devtools

 vue devtools插件下载,vue.js,前端,javascript,chrome devtools

作者的路径是下面这个,如果你的不是,可以通过搜索 vue-devtools 来找到

 C:\Windows\System32\vue-devtools\packages\shell-chrome 

第九步:使用

vue devtools插件下载,vue.js,前端,javascript,chrome devtools

 vue devtools插件下载,vue.js,前端,javascript,chrome devtools

 vue devtools插件下载,vue.js,前端,javascript,chrome devtools

 完成对vue-devtools的下载、编译、安装、使用,如果有错误做不出来,还是找到我看的这个文章编译安装 vue-devtools看看,我也是从这学的,说不定有帮助。文章来源地址https://www.toymoban.com/news/detail-839894.html

到了这里,关于下载、编译、安装、使用 vue-devtools的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【前端开发工具】VUE3 devtools安装

    尤雨溪在2020年9月19日晚正式发布vue3.0 one piece。此版本相较于vue2版本,更快、更小、更易维护、更易于原生、让开发者更轻松;所以学习vue3,对于一个前端开发者来说是一个刻不容缓的学习趋势。 学习vue3自然也离不开debug啦~~ Vue官方发布了调试工具Vue-Devtools。 VUE3的Vue-Devt

    2024年02月05日
    浏览(42)
  • 前端vue调试工具:chrome浏览器vue-devtools安装方式详述

    vue-devtools官方文档,也可按照官方文档操作 下面将介绍chrome集成vue-devtools的两种方式 通过扩展-扩展程序-访问chrome应用商店输入vue-devtools搜索插件即可 下载源码选择对应的版本tag官方源码 我们这里选择最新版本v6.5.1 下载压缩包,或clone都可以*( 克隆命令: 安装依赖以及打

    2024年03月15日
    浏览(55)
  • vue-devtools浏览器调试工具离线安装教程

    vue-devtools浏览器调试工具离线安装是下载源码,通过本地编译之后,在放到浏览器上 [ 不推荐 ]在github下载devtools源码,地址:https://github.com/vuejs/vue-devtools [ 推荐 ]在gitee(码云)下载devtools源码,地址:https://gitee.com/mirrors/vue-devtools?_from=gitee_search 我这边选择是标签里的v6.5.0 然后

    2024年02月09日
    浏览(36)
  • 如何快速使用Vue3在electron项目开发chrome Devtools插件

    为了方便快速建立项目,我已经写好脚手架,直接clone项目,快速开发 点击快速进入源代码 拉取代码 安装依赖 运行项目 打包项目 打开chrome://extensions/,打开开发者模式,直接把打包产物拖到窗口即可 具体代码进入源代码 主要使用我另外开发的插件chrome-extension-ipc实现通讯

    2024年02月06日
    浏览(36)
  • 《 Arm Compiler 5.06 》__ARM编译器官网下载、安装和使用说明(小白也能懂)

    目录 一、前言 二、官方网站下载 三、我的资源 四、编译器安装在 Keil 软件上  五、Keil选择编译器V5 “ V5.06 update 7(build 960) ” 六、测试 (* ̄︶ ̄)创作不易!期待你们的 点赞、收藏和评论喔。         【Keil MDK-Arm5.37】不再默认安装 《 Arm Compiler 5.06  》 ,而安装的只有最新

    2024年02月03日
    浏览(92)
  • 【electron】手把手教你在 electron 环境下使用 vue-devtools,附详细报错解决办法

    描述 对于某些electron项目,启动的时候,控制台会打印 Failed to fetch extension, trying 4 more times 这样的日志。 作为重度强迫症患者,必须解决掉。 环境 版本号 描述 文章日期 2023-10-12 操作系统 Windows electron 22.3.27 最后一个支持win7的大版本 node 16.16.0 vue-devtools 6.5.1 Vue Devtools 是一款

    2024年02月07日
    浏览(46)
  • Vue路由的使用及node.js下载安装和环境搭建

    目录 一、Vue路由 1.1 简介 ( 1 )  特点 ( 2 )  作用 1.2 实例 ( 1 )  引入 ( 2 )  组件 ( 3 )  关系 ( 4 )  路由 ( 5 )  事件 ( 6 )  锚点 二、nodeJS 2.1  下载 2.2  安装 2.3  环境搭建 新增 添加 测试 配置 运行 Vue路由是Vue.js框架中用于管理页面 导航的插件 。它允许开发者通过定义路由规

    2024年02月07日
    浏览(51)
  • Vue的路由使用,Node.js下载安装及环境配置教程 (超级详细)

    前言: 今天我们来讲解关于Vue的路由使用,Node.js下载安装及环境配置教程 首先我们Vue的路由使用,必须要导入官方的依赖的。 BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务 https://www.bootcdn.cn/ 路由思路 1、引入路由的js依赖 2、定义组件内容用来显示网页中的内容 3、定义

    2024年02月07日
    浏览(54)
  • 【Vue】初识Vue,Vue简介及Vue Devtools配置

    1. Vue是什么 关于这个问题官方给了我们答案: 一套用于 构建用户界面 的 渐进式 JavaScript框架 渐进式框架是指我们可以在项目中一点点来引入和使用Vue,而不一定需要全部使用Vue来开发整个项目; 2020年9月18日Vue3.0.0正式发布别名 One Piece (没错就是海贼王)。 2. Vue的特点

    2024年02月15日
    浏览(34)
  • 解决Vue.js Devtools未检测到Vue实例的问题

    在开发Vue.js应用时,Vue.js Devtools是一个不可或缺的调试工具。它能帮助开发者实时查看并操作Vue组件的状态、数据和方法等信息。然而,有时我们可能会遇到“Vue.js not detected”的提示,这意味着Vue.js Devtools未能成功识别和连接到我们的Vue应用。本文将详细解析这个问题,并提

    2024年01月16日
    浏览(33)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包