推荐一个 Vite Vue3 插件：devtools
原文地址：https://mp.weixin.qq.com/s/0qh5zTBmQDiUi2FyUQqXAA
今天无意中发现一个基于 Vite Vue3 非常优雅的插件：vue-devtools。
插件介绍
Chrome 浏览器的 Vue Dev Tools 很多人都使用过，优雅哥分享的这个 devtools 不是浏览器插件，而是基于 vite vue3 的 Vite 插件，运行在页面上：
vite-plugin-vue-devtools
目前在 Github 上近千个 star，Github 地址：
https://github.com/webfansplz/vite-plugin-vue-devtools
集成该插件后，在页面底部中间位置会有一个小图标，点击图标就在当前界面上展示 DevTools。
该插件功能强大，可以展示系统的路由信息、页面信息、组件、静态资源、Pinia 全局状态管理等。点击左侧 Inspector 图标，点击页面元素，会自动在 IDE 中定位到对应组件的位置。
插件使用
1. 安装依赖
pnpm add vite-plugin-vue-devtools -D
2.引入插件
在 vite.config.ts 中引入插件，并在 plugins 中添加该插件：
import vue from '@vitejs/plugin-vue'import VueDevTools from 'vite-plugin-vue-devtools'...export default defineConfig({plugins: [vue(),VueDevTools(),...]...})
启动项目，并在浏览器中访问，便可以在页面底部中间看见 Vue Logo 的小图标，点击该图标就打开了 DevTools。
如下是 Page、Components、Assets 的一些界面：
该插件只有在 development 模式下生效，打包构建后预览便没有 DevTools。这一特点也方便咱们开发过程使用，无需特别关注生产环境。
