vue-devtools的安装与使用教程
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
前言
主要介绍vue-devtools的安装与使用。
一、vue-devtools是什么？
vue-devtools是一款基于chrome游览器的插件，用于调试vue应用，这可以极大地提高我们的调试效率。
二、vue-devtools安装
1.下载vue-devtools工具
进入GitHub官网进行下载，网址：https://github.com/vuejs/vue-devtools
下载安装包并将安装包进行解压
2.安装vue-devtools工具
在解压后的文件夹中打开cmd命令行，在命令行中输入命令 npm install（若不能使用npm命令，请先安装node.js）
下载完成后执行：npm run build 命令
完成安装。
然后进入 shells\chrome子目录，编辑 manifest.json 文件，修改persistent 为 true。
修改完成之后，将chrome文件拖至谷歌浏览器的扩展程序中即可。重启浏览器扩展程序即可使用。
若是在npm run build时出错
我们换一种安装方式：
首先，创建一个空文件夹，进入这个文件的终端。
输入npm install vue-devtools
如上图，即可完成安装。
安装完成后，进入该文件下的node_modules 文件，找到 vue-devtools 文件，将vender 文件下的 manifest.json ，修改persistent 为 true。
最后，将vender 文件拖至谷歌浏览器的扩展程序中即可。重启浏览器扩展程序即可使用。
三、vue-devtools的使用
components： 显示当前点击组件的可用数据,并可以修改和添加，修改可实时反应在界面中，非常方便调试一些业务流程比较繁琐，可以任意展示其中的一步操作的界面。
vuex： 使用vuex时，这里可以方便查看state,mutaitons, action等信息。
events： 记录事件，比如点击事件，当你点击之后，这里会显示出来点击事件来源于哪一个组件，以及事件名等信息。
Routing 记录路由的变化，以及路由相关信息。下拉routes 可以列出当前应用所有的路由。
总结
vue devtools 在用vue做的网站上会变亮但不能查看其结构。只有在本地运行的项目才能查看。
到此这篇关于vue-devtools的安装与使用教程的文章就介绍到这了,更多相关vue devtools内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
vue代理如何配置重写方法(pathRewrite与rewrite)
这篇文章主要介绍了vue代理如何配置重写方法(pathRewrite与rewrite),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
本文主要介绍了nuxt.js框架使用小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2023-08-08
很多应用都会需要对不同的用户进行权限控制，本文主要介绍了Vue动态权限登录实现(基于路由与角色)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-05
这篇文章主要介绍了Vue使用高德地图选点定位搜索定位功能,文中给大家提到了常见问题解决方法，本文结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-10-10
这篇文章主要介绍了富文本编辑器vue2-editor实现全屏功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下2019-05-05
这篇文章主要介绍了vue3中的reactive函数声明数组方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
这篇文章主要给大家介绍了关于vue源码之批量异步更新策略的相关资料，关于vue异步更新是我们日常开发中经常遇到的一个功能，需要的朋友可以参考下2021-05-05
Message在开发中的使用频率很高，也算是Element-UI组件库中比较简单的，对于感兴趣的朋友可以一起探讨一下Message组件的实现，本文详细介绍了vue中this.$message的实现过程，感兴趣的同学可以参考一下2023-04-04
防抖函数 debounce 指的是某个函数在某段时间内,无论触发了多少次回调,都只执行最后一次,在Vue中使用防抖函数可以避免在频繁触发的事件中重复执行操作,这篇文章主要介绍了vue中使用lodash的debounce防抖函数,需要的朋友可以参考下2024-01-01
vue.config.js 是一个可选的配置文件,如果项目的 (和 package.json 同级的) 根目录中存在这个文件,那么它会被 @vue/cli-service 自动加载,这篇文章主要介绍了vue项目中vue.config.js文件的介绍,需要的朋友可以参考下2024-02-02
最新评论