🚀 Vite + Vue 3 插件生态实战笔记核心理念：Vite 插件基于 Rollup 接口，但增加了 Vite 特有的钩子。在 Vue 3 项目中，我们的目标是：自动化 手动配置，按需加载 全量引入。1. 基础核心层 (必装)这些是项目运行的基石，通常由脚手架自动安装，但需理解其作用。插件名称作用备注@vitejs/plugin-vue编译.vue单文件组件必须。支持 SFC、HMR、TS 集成。@vitejs/plugin-vue-jsx支持 JSX/TSX 语法如果你习惯写 JSX 而非 Template 则安装。sass/lessCSS 预处理器无需插件配置，只需npm install sass，Vite 自动识别.scss。npminstall-D@vitejs/plugin-vue sass2. 效率提升层 (强烈推荐 - "真香"组合)这是现代 Vue 3 开发体验的核心，能减少 50% 以上的样板代码。A. 自动导入 API (unplugin-auto-import)痛点：每个文件都要写import { ref, computed, watch } from 'vue'。解决：自动识别并注入 Vue/Vue Router/Pinia 的 API。B. 自动注册组件 (unplugin-vue-components)痛点：使用 UI 库或本地组件时，既要import又要注册到components。解决：在模板中直接使用ElButton或MyComp，插件自动处理导入和注册。C. UI 库按需引入 Resolver痛点：引入 Element Plus 或 Ant Design Vue 时，打包体积巨大。解决：配合上述两个插件，实现样式和 JS 的完全按需加载。安装：npminstall-Dunplugin-auto-import unplugin-vue-components# 根据 UI 库选择对应的 resolver，例如 element-plus:npminstall-D@element-plus/resolvers# 或者 ant-design-vue:npminstall-D@ant-design-vue/resolvers配置 (vite.config.js)：importAutoImportfrom'unplugin-auto-import/vite'importComponentsfrom'unplugin-vue-components/vite'import{ElementPlusResolver}from'unplugin-vue-components/resolvers'exportdefaultdefineConfig({plugins:[vue(),// 1. 自动导入 API (ref, computed, useRouter 等)AutoImport({imports:['vue','vue-router','pinia'],// 自动识别这些库的全局 APIdts:'src/auto-imports.d.ts',// 生成 TS 类型声明，让 IDE 不报错resolvers:[ElementPlusResolver()],// 自动导入 ElMessage 等 API