Vite + Vue 3 插件生态实战笔记
🚀 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/less | CSS 预处理器 | 无需插件配置，只需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