unplugin-auto-import在Vite中实现Vue API、工具函数及自定义模块的零手动import，通过编译时扫描自动注入import语句，支持生成TS类型声明（dts）、ESLint全局识别（eslintrc）及第三方库按需导入（如Element Plus特定成员），搭配unplugin-vue-components可达成组件级按需加载。
在 Vite 构建中配置按需自动导入，核心是用 unplugin-auto-import 实现 Vue API、工具库函数和自定义模块的零手动 import。它不只省代码，还生成类型声明、兼容 ESLint，让开发体验更顺滑。
安装与基础配置
执行安装命令：
npm install -D unplugin-auto-import
在 vite.config.ts 中加入插件：
立即学习“Java免费学习笔记（深入）”；
import AutoImport from 'unplugin-auto-import/vite'
在 plugins: [] 数组中启用：
- 导入 Vue 核心 API（ref、reactive、onMounted 等）
- 导入 vue-router 和 @vueuse/core 的常用函数
- 指定自定义工具文件目录（如
src/utils/、src/composables/），自动扫描并导入其中的导出项
生成 TypeScript 类型声明
必须开启 dts 选项，否则 VS Code 和 TS 编译器无法识别自动导入的变量：
- 设置
dts: './auto-imports.d.ts' - 在
tsconfig.json的include字段中加入该文件路径 - 确保项目启动或构建时自动生成并更新声明，避免 “xxx is not defined” 报错
适配 ESLint 全局识别
ESLint 默认会报未声明变量错误，需让插件同步生成 ESLint 配置：
- 启用
eslintrc: { enabled: true } - 插件会自动创建
.eslintrc-auto-import.json（或自定义路径） - 该配置将自动导入的符号注册为全局变量，消除
no-undef警告
按需导入第三方库特定成员
避免整包引入（比如 Element Plus 的全部组件或 Message 方法）：
- 在
imports选项中显式列出需要的项：{ from: 'element-plus', imports: ['ElMessage', 'ElNotification'] } - 支持从本地库、自定义 hooks、甚至枚举文件中导入（通过
dirs配置） - 搭配
unplugin-vue-components可进一步实现组件级按需加载，两者互补
