良好的开发者体验（DX）对于开源产品的使用至关重要。
正因为如此，框架作者需要一直致力于DX和UX的改进，以免落后于竞争对手。
在今天的文章中，我想深入研究我最近发现的一个项目- Vue Vite DevTools。这个项目是一个Vite插件，允许你在Vue应用程序中拥有惊人的DevTools。它的灵感来自Nuxt DevTools，因此UI几乎相同。
你可以在这里查看插件的所有文档。
安装
插件的安装非常简单。
yarn add --dev vite-plugin-vue-devtools
然后，将其添加到vite.config.ts文件中。
import { defineConfig } from 'vite'
import VueDevTools from 'vite-plugin-vue-devtools'
export default defineConfig({
plugins: [
VueDevTools(), // <-- here
vue(),
],
})
就是这样！当你用yarn dev运行应用程序时，你应该在页面底部看到一个小按钮，当你点击它时，它会展开dev tools页面：
特性
Vue Vite Devtools提供了一些关于应用程序的有用配置，您可以使用这些配置来更好地控制应用程序。
Pages
页面选项卡显示您的当前路由，并提供快速导航到它们的方法。对于动态路由，它还提供了一个表单，以交互方式填充每个参数。
Components
组件选项卡显示在应用中使用的所有组件。您还可以选择它们来查看组件的详细信息。
Assets
显示所有静态资源及其信息。您可以在浏览器中打开资源或下载资源。
Timeline
时间轴选项卡有三个类别：性能、路由器导航和Pinia。您可以在它们之间切换以查看状态更改和时间表。
Routes
Routes选项卡是与Vue Router集成的功能，允许您查看已注册的路由及其详细信息。
Pinia
Pinia选项卡与Pinia集成，允许您查看已注册的模块及其详细信息。
Graph
图表选项卡提供了一个图表视图，显示组件之间的关系。
Inspect
与vite-plugin-inspect集成，允许您检查Vite的转换步骤。了解每个插件如何转换您的代码并发现潜在问题。
Inspector
您还可以使用“Inspector”功能来检查DOM树并查看哪个组件正渲染它。单击以转到特定行。使更改变得更加容易，而不需要彻底了解项目结构。(基于vite-plugin-vue-inspector实现的）。
