vite-plugin-vue-devtools插件

vite-plugin-vue-devtools插件旨在帮助开发者更快地理解并调试Vue应用。它通过提供全面的功能和直观的界面,以图形化的方式展示应用程序状态,使开发者能够更方便地查看和管理Vue应用的各个方面。此外,该插件还支持Vue3.0+版本,并且仅在开发模式下生效,方便开发者在开发过程中使用,无需特别关注生产环境。

功能

  1. 页面导航:方便地查看和跳转应用中的所有路由,对于动态路由,还提供了交互式填写参数的表单。此外,用户还可以在搜索框中输入指定的路径来匹配相应的路由。
  2. 组件探索:显示组件树并允许用户深入到每个组件的数据和属性中。通过点击Inspector图标并选中页面元素,可以在IDE中自动定位到对应组件的位置
  3. 资产管理:列出应用的静态资源信息,包括Vite config.publicDir目录下的资源,用户可以在浏览器打开或下载它们。
  4. 性能追踪:记录性能、路由变化和Pinia状态更新,通过Timeline Tab可以切换查看对应的状态变化及时间线。
  5. 路由展示:与Vue Router进行集成,允许用户查看所注册的路由及相关详细信息。
  6. Pinia监控:针对Pinia的状态管理进行详细监控。
  7. 组件图谱:揭示组件之间的关系,帮助理解和优化组件结构。
  8. 检查器:深入代码层面,了解Vite编译过程,并直接在编辑器中定位问题。

vite的使用安装

npm:

npm add -D vite-plugin-vue-devtools

pnpm:

pnpm add -D vite-plugin-vue-devtools

yarn:

yarn add -D vite-plugin-vue-devtools

bun:

bun add -D vite-plugin-vue-devtools

vite.config.ts文件中(文件名称可能有所不同,注意文件内容)

//  Configuration Viteimport { defineConfig } from 'vite'
import VueDevTools from 'vite-plugin-vue-devtools'export default defineConfig({plugins: [VueDevTools(),],
})

安装完成,可以开始使用了。

Vite Plugin | Vue DevTools (vuejs.org)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/15469.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Go专家编程——内存管理——垃圾回收】

垃圾回收 所谓的垃圾就上不在需要的内存块,垃圾如果不清理,这些内存块就没有办法再次被分配使用。在不支持垃圾回收的编程语言中,这些垃圾内存就上泄露的内存。 1. 垃圾回收算法 常见的垃圾回收算法有3种 引用计数:对每个对象…

yolov10 快速使用及训练

参考: https://docs.ultralytics.com/models/yolov10/ ultralytics其实大多数系列都能加载使用: 官方: https://github.com/THU-MIG/yolov10.git 代码参考: https://colab.research.google.com/github/roboflow-ai/notebooks/blob/main/notebooks/train-yolov10-object-…

一篇文章讲透排序算法之希尔排序

希尔排序是对插入排序的优化,如果你不了解插入排序的话,可以先阅读这篇文章:插入排序 目录 1.插入排序的问题 2.希尔排序的思路 3.希尔排序的实现 4.希尔排序的优化 5.希尔排序的时间复杂度 1.插入排序的问题 如果用插入排序对一个逆序…

521源码-免费代码基础学习-PHP如何运用变量教程

更多网站源码学习教程,请点击👉-521源码-👈获取最新资源 为什么要学习PHP?“我可以用JavaScript来实现程序编写。”但JavaScript的能力是有限的,JavaScript通常运行在浏览器(客户端)&#xff0…

go语言中for的4种循环形式总结

和其他语言不一样,go语言中的循环语句只有for一种,但是go里面的for却有3种不同的循环形式,总结如下: 1. 无限循环 for { //这个就是一个“死循环”,注意必须要有 break条件,否则就真成死循环了 } 2. fo…

Redis 源码学习记录:集合 (set)

无序集合 Redis 源码版本:Redis-6.0.9,本篇文章无序集合的代码均在 intset.h / intset.c 文件中。 Redis 通常使用字典结构保存用户集合数据,字典键存储集合元素,字典值为空。如果一个集合全是整数,则使用字典国语浪费…

PostgreSQL入门教程

PostgreSQL是一种开源的关系型数据库管理系统,它具有高度的可靠性、可扩展性和性能。下面是一个简单的PostgreSQL入门教程,帮助你开始使用这个强大的数据库管理系统。 步骤1:安装PostgreSQL 首先,你需要下载并安装PostgreSQL。你…

2024年最全的信息安全、数据安全、网络安全标准分享(可下载)

以上是资料简介和目录,如需下载,请前往星球获取:https://t.zsxq.com/Gz1a0

【全网最全】2024电工杯数学建模A题成品论文+前三题完整解答matlab+py代码等(后续会更新成品论文)

您的点赞收藏是我继续更新的最大动力! 一定要点击如下的卡片链接,那是获取资料的入口! 【全网最全】2024电工杯数学建模A题成品论文前三题完整解答matlabpy代码等(后续会更新成品论文)「首先来看看目前已有的资料&am…

Python 点云平面分割【RANSAC算法】

点云平面分割 一、介绍1.1 概念1.2 算法思路1.3 参数设置二、代码示例三、结果示例其他参考链接:C++中实现点云平面分割 一、介绍 1.1 概念 点云平面分割:可以在点云数据中找到平面并计算平面模型系数,同时输出平面点云及非平面点云。 1.2 算法思路 实现思路: 首先,采用…

Sass是什么?有哪些优缺点?

目录 一、Sass是什么? 二、Sass的优缺点 三、Sass与SaaS 一、Sass是什么? Sass是世界上最成熟、最稳定、最强大的专业级CSS扩展语言。 Sass makes CSS fun again. Sass is an extension of CSS, adding nested rules, variables, mixins, selector in…

【C++高阶(一)】继承

目录 一、继承的概念 1.继承的基本概念 2.继承的定义和语法 3.继承基类成员访问方式的变化 ​编辑 4.总结 二、基类和派生类对象赋值转换 三、继承中的作用域 四、派生类的默认成员函数 1.派生类中的默认构造函数 2.派生类中的拷贝构造函数 3.派生类中的移动构造函数…

英语学习笔记25——Mrs. Smith‘s kitchen

Mrs. Smith’s kitchen 史密斯太太的厨房 词汇 Vocabulary Mrs. 夫人【已婚】 复习:Mr. 先生 全名 / 姓    Mrs. 夫人 全名 / 丈夫的姓    Miss 小姐(未婚) 全名 / 姓    Ms. 女士 全名 / 姓 查看婚姻状况,可以观察…

springboot项目中图片上传之后需要重启工程才能看到图片?

需求背景 最近在做一个用户自定义上传头像的小需求,用户上传头像然后需要立马回显。 需求是很常见的、正当的需求。如果不使用到对象存储这类服务,我们把用户头像的图片文件仅存在本地就可以了。我们在开发的过程中为了工程管理方便通常下意识会将图片…

freertos串口DMA队列发送卡死

调试回调函数的时候,我在cube中删除了默认的DMA通道,又新增了另外一个通道,导致NVIC中,该通道的优先级为0,后来改成了5就正常了。

Modbus TCP转Profinet网关测试配置案例

本案例采用XD-ETHPN20网关做为Modbus TCP通信协议设备与Profinet通信协议设备连接的桥梁。Modbus TCP是一种基于TCP/IP协议的工业通信协议,而Profinet则是用于太网通信的协议。Modbus TCP转Profinet网关可实现这两种不同协议之间的数据交换和传输,极大地…

算法刷题笔记 逆序对的数量(C++实现)

文章目录 题目描述解题代码&#xff08;蛮力版&#xff09;解题代码&#xff08;基于归并排序&#xff09; 题目描述 给定一个长度为n的整数数列&#xff0c;请你计算数列中的逆序对的数量。逆序对的定义如下&#xff1a;对于数列的第i个和第j个元素&#xff0c;如果满足i<…

Python高级进阶--dict字典

dict字典⭐⭐ 1. 字典简介 dictionary&#xff08;字典&#xff09; 是 除列表以外 Python 之中 最灵活 的数据类型&#xff0c;类型为dict 字典同样可以用来存储多个数据字典使用键值对存储数据 2. 字典的定义 字典用{}定义键值对之间使用,分隔键和值之间使用:分隔 d {中…

【ECharts】数据可视化

目录 ECharts介绍ECharts 特点Vue2使用EChats步骤安装 ECharts引入 ECharts创建图表容器初始化图表更新图表 示例基本柱状图后台代码vue2代码配置 组件代码运行效果 基本折线图示例代码组件 基础饼图示例代码后台前端配置组件运行效果 其他 ECharts介绍 ECharts 是一个由百度开…

spring模块(一)容器(4)ApplicationContextAware

一、介绍 1、问题引入 为了获取已被实例化的Bean对象,如果使用再次加载配置文件的方法,可能会出现一个问题,如一些线程配置任务, 会启动两份,产生了冗余. ApplicationContext appContext new ClassPathXmlApplicationContext("applicationContext.xml"); UserS…