共计 1752 个字符，预计需要花费 5 分钟才能阅读完成。
前言
近年来，人们越来越关注开发者体验 (DX)。工具和框架也始终在致力改良 DX，比方这两年光速倒退的 Vite。在大多数人的印象中，Vite 的特点是快，然而在我看来让它倒退迅速并在前端构建工具占据一席之地的次要起因是它易用且扩展性强的插件设计机制，这让开发者能以较低成本集成 Vite 到他们的工具和框架中，时至今日，大多数支流框架及工具都曾经反对 Vite，Vite 的生态也曾经非常凋敝。Anthony Fu 在 Vue Amsterdam 2023 上开源了 Nuxt DevTools，这是一个能够帮忙咱们理解咱们的 Nuxt 利用并进一步改善开发者体验的工具，它深深地触动和启发了我。Nuxt 能够有这么酷的工具，那么 Vue 能不能也有一个呢？咱们都晓得官网曾经有一个 Vue Devtools 的浏览器扩大，那么咱们能不能做一个跟 Vite 绑定的 Vue Devtools，在实现原先 Vue Devtools 能力的同时并集成现有 Vite 生态的一些插件来扩大更强的能力呢？并且咱们能够通过裸露一些配置和能力来容许用户扩大和定制一些性能，来获取更好的灵活性。基于以上的思考，vite-plugin-vue-devtools 诞生了，让咱们来看看它带来了什么!
介绍 Vue DevTools
Overview
展现应用程序的疾速概览，扩大利用正在应用的 Vue 版本、页面和组件数量。
Pages
Pages Tab 展现了以后注册的路由并且提供了一个快捷的形式进行路由导航。对于动静路由，它还提供了一个表单来交互式地填写每个参数。你还能够在搜寻框输出指定的门路来匹配相应的路由。
Components
Components Tabs 展现了你在应用程序应用的组件和它们的层级关系。你能够选中相应的组件来查看它的详细信息(例如 data、props 等)。
Assets
Assets Tab 展现了你的动态资源列表 (目前只展现 Vite config.publicDir 目录下资源) 以及它们的详细信息，你能够在浏览器关上或下载它们。
Timeline
Timeline Tab 分为三个分类：别离是性能、路由跳转及 Pinia。你能够切换它们来查看对应的状态变动及工夫线。
Routes
Routes Tab 是一个与 Vue Router 进行集成的性能，它容许你查看你所注册的路由及相干详细信息。
Pinia
Pinia Tab 是一个与 Pinia 进行集成的性能，它容许你查看你所注册的模块及相干详细信息。
Graph
Graph Tab 提供了显示组件之间关系的依赖视图。
Inspect
Inspect 集成了 Vite -plugin- Inspect，容许你查看 Vite 的转换步骤。理解每个插件如何转换你的代码并发现潜在问题是很有帮忙的。
Inspector
你也能够应用“Inspector”个性来查看 DOM 树，看看是哪个组件在渲染它。单击以转到特定行的编辑器。使更改更容易，而不须要彻底理解我的项目构造。(此性能基于 vite-plugin-vue-inspector 实现)
Vue DevTools 用法
装置
# vite-plugin-vue-devtools
npm install vite-plugin-vue-devtools -D配置
import {defineConfig} from 'vite'
import VueDevTools from 'vite-plugin-vue-devtools'
export default defineConfig({
plugins: [VueDevTools(),
vue(),],
})注意事项
- 插件仅作用于开发模式
- 仅反对 Vue3.0+
- 目前仅反对单实例 Vue 利用 (多实例反对行将到来)
- 不反对 SSR 利用 (如果你正在应用 Nuxt，请间接应用 nuxt/devtools)
-
遵循 Vue devtools 配置，如果你配置了
hide选项，它将同样作用于此插件，例:// 这个 Vue 实例将被插件疏忽 createApp({render: () => h(App), devtools: {hide: true,}, })
致谢
这个插件的灵感高度来自于 Anthony Fu 创作的 nuxt/devtools，并且复用了它的 UI 及一些性能。
结语
插件目前还处于 Early Preview 阶段、欢送任何想法及 Bug 反馈。如果它对你有所帮忙，请给它一个 Star 反对作者 🌹。