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 sass

2. 效率提升层 (强烈推荐 - "真香"组合)

这是现代 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

日记详情

Vite + Vue 3 插件生态实战笔记