vue devtools的安装与使用教程

 更新时间:2022年11月11日 09:40:14   作者:如果没有_明天  
vue-devtools是一款基于chrome游览器的插件,用于调试vue应用,这可以极大地提高我们的调试效率,这篇文章主要介绍了vue devtools的安装与使用教程,需要的朋友可以参考下

Vue调试工具vue-devtools的安装与使用

一.在github上下载压缩包,github下载地址:https://github.com/vuejs/vue-devtools

二.解压到本地的某盘

三.用你的npm中进入该文件夹下

四.依次输:

1:npm install

2:npm run build         (这一步一定不要忘了,没有执行这一步的话,项目文件夹shells>chrome文件夹里会少一个src文件夹,如下图)

vue-devtools的安装与使用

五:修改shells>chrome文件夹下的mainifest.json 中的persistant为true

vue-devtools的安装与使用

六:我们找到谷歌浏览器的扩展程序功能,勾选开发者模式,然后我们将插件文件夹里的shells>chorme文件夹直接拖到页面中,完成安装。

(注意:如果我们没有执行第四部的npm run build,在这里会报错:无法加载背景脚本"build/background.js")

七:在插件的目录下执行npm run dev,这个时候我们的插件就可以运行了,打开localhost:8080可以看到插件已经安装并运行了。

vue-devtools的安装与使用

八:我们在打开本地的其他项目时,就不需要在vue-devtools文件夹下执行npm run dev了,因为这个插件已经安装在浏览器中。接下来就愉快的调试你的vue项目吧。

总结

以上所述是小编给大家介绍的vue devtools的安装与使用教程,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • vue中sync语法糖的用法详解

    vue中sync语法糖的用法详解

    Vue的.sync语法糖是一个用于双向数据绑定的指令,可以在子组件中用来监听父组件传递下来的props的变化,本文给大家介绍了在Vue中,.sync语法糖的使用方法,感兴趣的朋友跟着小编一起来学习吧
    2024-01-01
  • vue前端导出多级表头的excel表的示例代码

    vue前端导出多级表头的excel表的示例代码

    本文主要介绍了vue前端导出多级表头的excel表的示例代码,可以使用xlsx库来创建Excel文件,下面就来具体介绍一下,感兴趣的可以了解一下
    2024-06-06
  • vue如何解决空格和空行报错的问题

    vue如何解决空格和空行报错的问题

    这篇文章主要介绍了vue如何解决空格和空行报错的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue element-ui el-tooltip组件失效问题及解决

    vue element-ui el-tooltip组件失效问题及解决

    这篇文章主要介绍了vue element-ui el-tooltip组件失效问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • 解决v-for中使用v-if或者v-bind:class失效的问题

    解决v-for中使用v-if或者v-bind:class失效的问题

    今天小编就为大家分享一篇解决v-for中使用v-if或者v-bind:class失效的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • 一篇文章带你吃透Vuex3的状态管理

    一篇文章带你吃透Vuex3的状态管理

    Vuex是一个专为Vue.js应用程序开发的状态管理模式,它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化,下面这篇文章主要给大家介绍了关于如何通过一篇文章带你吃透Vuex3的状态管理,需要的朋友可以参考下
    2022-07-07
  • vue封装一个简单的div框选时间的组件的方法

    vue封装一个简单的div框选时间的组件的方法

    这篇文章主要介绍了vue封装一个简单的div框选时间的组件的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • Nuxt.js SSR与权限验证的实现

    Nuxt.js SSR与权限验证的实现

    这篇文章主要介绍了Nuxt.js SSR与权限验证的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-11-11
  • Vue代理请求数据出现404问题及解决

    Vue代理请求数据出现404问题及解决

    这篇文章主要介绍了Vue代理请求数据出现404的问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07
  • vue中typescript装饰器的使用方法超实用教程

    vue中typescript装饰器的使用方法超实用教程

    这篇文章主要介绍了vue中使用typescript装饰器的使用方法超实用教程,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-06-06

最新评论