unplugin-auto-import 用于自动引入 composition api、框架库及工具库的函数，不处理组件引入；需配合 unplugin-vue-components 实现组件库自动引入。
在 Vite 项目中，unplugin-auto-import 用于自动引入 Composition API（如 ref、computed）、框架库（Vue、Vue Router、Pinia）及工具库（如 @vueuse/core），但它不负责组件自动引入——那是 unplugin-vue-components 的职责。如果你的目标是“组件库自动引入”，实际需要的是两者配合使用，而 unplugin-auto-import 主要解决的是 API 函数的免 import。
安装 unplugin-auto-import
执行以下命令安装（开发依赖）：
npm install -D unplugin-auto-import- 或
yarn add -D unplugin-auto-import - 或
pnpm add -D unplugin-auto-import
基础配置（vite.config.ts）
在 vite.config.ts 中导入并启用插件，指定要自动导入的库和类型声明路径：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
export default defineConfig({
plugins: [
vue(),
AutoImport({
imports: ['vue', 'vue-router', 'pinia', '@vueuse/core'],
dts: 'src/auto-imports.d.ts',
eslintrc: {
enabled: true,
filepath: './.eslintrc-auto-import.json'
}
})
]
})
配置后首次启动或保存时，插件会自动生成 src/auto-imports.d.ts，为 TypeScript 提供类型提示，并同步更新 ESLint 全局变量声明。
支持组件库的 API 自动引入（如 Element Plus、Ant Design Vue）
若你用的是 Element Plus 等 UI 库，其 useXXX 组合式函数（如 useMessage、useNotification）也需纳入自动导入范围。官方推荐方式是通过 resolvers 配合 unplugin-vue-components 处理组件，而 unplugin-auto-import 则借助对应 resolver 补充 API：
- 安装 resolver：例如
npm install -D @element-plus/icons-vue（按需） - 在
AutoImport配置中加入 resolver（需额外安装unplugin-auto-import/resolvers）：
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// 注意：ElementPlusResolver 同时服务于 unplugin-vue-components 和 unplugin-auto-import
AutoImport({
resolvers: [ElementPlusResolver()],
imports: ['vue', 'vue-router', 'pinia']
})
这样 ElMessage、useMessage 等都会被识别并自动导入。
本地自定义 Hooks / Composables 自动导入
把封装好的组合式函数放在统一目录（如 src/composables），可通过 dirs 选项让插件扫描导出内容：
AutoImport({
imports: ['vue'],
dirs: ['src/composables/**'],
dts: 'src/auto-imports.d.ts'
})
例如 src/composables/useApi.ts 导出 useApi，之后在任意 .vue 或 .ts 文件中直接使用，无需 import。
