Vite + Vue3中安装vue-devtools工具

      一、解决vue-devtools插件不显示组件问题

    从vue-cli（vue2-底层webpack）中转化到create-vue(vue3-底层vite)，新手遇到了非常棘手的问题，我的原来浏览器中安装的vue-devtools在控制台不显示！！！各种网上找原因，卸载插件重装，看版本兼容信息，配置 开发环境各种，都不显示组件信息

后面才发现是vue3脚手架里面内置已经配置了 插件 “vite-plugin-vue-devtools”，可能会与浏览器的冲突，导致不显示

想要显示，需要在 vite.config.js里面把 代码注释掉，不使用内置配置

再看网页的控制台，发现组件 可以显示了

      二、vue3中 "vite-plugin-vue-devtools"的安装

     官方默认推荐是内置 vite-plugin-vue-devtools插件

     可查看官网：Vite Plugin | Vue DevTools

    1.安装

npm add -D vite-plugin-vue-devtools

     2.配置 ，在vite.config.js中引入并配置

import { defineConfig } from 'vite'
import VueDevTools from 'vite-plugin-vue-devtools'

export default defineConfig({
  plugins: [
    VueDevTools(),
    // 其他插件...
  ],
})

   3.页面显示

该插件通过与Vue和Vite深度集成，提供了一套直观的界面，以图形化的方式展示你的应用程序状态。其亮点包括：

页面：方便地查看和跳转应用中的所有路由。
组件：显示组件树并允许你深入到每个组件的数据和属性中。
资产：列出应用的静态资源信息，可预览或下载。
时间线：记录性能、路由变化和Pinia状态更新。
路由：展示了Vue Router的所有注册路由及其详细信息。
Pinia：针对Pinia的状态管理进行详细监控。
图谱：揭示组件之间的关系，帮助理解和优化组件结构。
检查器：深入代码层面，了解Vite编译过程，并直接在编辑器中定位问题。