前言
近年来，人们越来越关注开发者体验 (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反对作者 。