安装vue devtools失败怎么办

安装vue devtools失败的解决办法:1、在官网下载“vue-devtools”压缩包并解压;2、安装git bash;3、在终端cd到“devtools-main”文件夹中;4、执行“npm install yarn -g”命令;5、打开“manifest.json”文件并将“persistent”改为“true”即可。

安装vue devtools失败怎么办

本教程操作环境:Windows10系统、vue-devtools6.1.4版、Dell G3电脑。

安装vue devtools失败怎么办?

关于vue-devtools安装过程的报错问题解决

一、用谷歌浏览器在官网下载压缩包,记得存储的路径(避免存储路径包含中文),并解压

立即学习“前端免费学习笔记(深入)”;

GitHub – vuejs/devtools: ⚙️ Browser devtools extension for debugging Vue.js applications.

743ada33817cbbe01aacd0b76cd5865.jpg

 二、安装git bash(在博客里随便找一篇安装教程就可以)

就是这个东西

安装vue devtools失败怎么办

三、在终端cd到devtools-main文件夹中,注意一般压缩包解压会在外包裹一个文件夹,一定要cd到有package.json的文件夹   (接下来所有指令都在该文件夹下操作)

2d7721b32b0b516d363c1cd9ca8defb.jpg

 三、有些报错是因为npm自身的局限性,以及部分模块没有安装。为了避免报错,直接安装yarn

npm install yarn -gnpm install webpack webpack-cli –g   //(全局安装webpack、webpack-cli)

登录后复制

四、关闭当前终端,右键点击该文件夹,用git bash打开,并执行如下操作

yarn install

登录后复制

a06beb3c2b18c472927ae5e56a2a79a.jpg

 之后在VS code中打开manifest.json文件将图中persistent改为true

65b5ab71c227437052ebe860b326f0c.jpg

 最后在之前打开的git bash中执行命令yarn run build,等待安装

五、打开Chrome中的设置—>更多工具—>扩展程序—>右上角打开开发者模式,并刷新页面,点击加载解压的扩展程序打开devtools-main文件夹

a82fdfa40e55737ab87c2a61e1df2c5.jpg

 点击详情,并勾选允许访问文件网址(可以打开哔哩哔哩主页看是否成功点亮小V标)

bf51e173fb7fa421dc40fe5e19a9690.jpg

推荐学习:《GitHub – vuejs/devtools: ⚙️ Browser devtools extension for debugging Vue.js applications.》

以上就是安装vue devtools失败怎么办的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2922876.html

(0)
上一篇 2025年3月11日 18:42:20
下一篇 2025年2月25日 17:29:03

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • vue怎么修改父组件值

    vue修改父组件值的方法:1、通过props的方式,将父组件的方法传递到子组件,在子组件中通过props接收;2、通过“this.$emit”触发父组件方法实现修改;3、通过“this.$parent”直接触发父组件修改即可。 本教程操作环…

    2025年3月11日
    200
  • vue二级路由报错怎么办

    vue二级路由报错的解决办法:1、检查并删除二级路由路径前面的斜杠;2、检查父路由是否有path,若path是斜杠,则redirect直接匹配page2;3、不使用redirect,并设置默认显示的子路由path为空即可。 本教程操作环境:…

    2025年3月11日
    200
  • vue怎么禁止返回到上一页

    vue禁止返回到上一页的方法:1、通过“npm install vue-prevent-browser-back –save”命令安装“vue-prevent-browser-back”;2、使用“import preventB…

    2025年3月11日
    200
  • vue项目部署乱码怎么办

    vue项目部署乱码的解决办法:1、执行“npm run build”命令;2、通过在“index.html”添加内容“”来解决乱码问题即可。 本教程操作环境:Windows10系统、Vue 3版、Dell G3电脑。 vue项目部署乱码怎么…

    2025年3月11日
    200
  • vue不刷新当前页面怎么办

    vue不刷新当前页面的解决办法有:1、在data中定义一个阈值,代码如“this.show = false;setTimeout(() => {this.show = true},0)”;2、在数据都处理完成后,使用“this.$fr…

    2025年3月11日
    200
  • vue能显示源码吗

    vue能显示源码,vue查看看源码的方法是:1、通过“git clone https://github.com/vuejs/vue.git”获取vue;2、通过“npm i”安装依赖;3、通过“npm i -g rollup”安装rollu…

    2025年3月11日 编程技术
    200
  • vue有没有冒号

    vue中是有冒号的;通过查看Vue的API文档时,我们会发现冒号“:”其实是“v-bind”的缩写,所以在使用上,一般的常量属性不用添加冒号,如果是会产生变化的值则要加上冒号。 本教程操作环境:Windows10系统、Vue 3版、Dell…

    2025年3月11日
    200
  • vue可以操作本地文件吗

    vue可以操作本地文件,其操作方法是:1、利用“XMLHttpRequest”对本地文件进行读取操作;2、利用“input”标签上传文件,然后使用“FileReader”对象和异步api,读取文件中的数据。 本教程操作环境:Windows1…

    2025年3月11日
    200
  • vue工程编译sass错误怎么办

    vue工程编译sass错误的解决办法:1、使用镜像源“cnpm install node-sass sass-loader –save-dev”安装sass;2、在“package.json”中更改“sass-loader”版本…

    2025年3月11日
    200
  • vue组件怎么传值

    传值方法:1、利用props实现父传子;2、子传父,需要自定义事件,在子组件中用“this.$emit(‘事件名’)”触发,而父中用“@事件名”监听;3、兄弟间,通过公有父元素作为桥接,结合父子props传参、子父自定义事件;4、用路由传值…

    2025年3月11日
    200

发表回复

登录后才能评论