Vue 3 项目通过配置 unplugin-auto-import 和 unplugin-vue-components 实现 ref、computed 等 API 及 MyButton、ElInput 等组件的自动导入；需安装插件、在 vite.config.ts 中配置 AutoImport（支持 Vue/Pinia/Router/API 自动引入）和 Components（支持本地组件及 Element Plus 等 UI 组件自动引入），并确保 tsconfig.json 包含生成的 .d.ts 文件。
Vue 3 项目初始化时配置 unplugin-auto-import 和 unplugin-vue-components，核心是让 API（如 ref、computed）和组件（如 MyButton.vue、ElInput）都不用手动 import，直接在模板或脚本里用。
安装必要插件
在项目根目录运行：
npm install -D unplugin-auto-import unplugin-vue-components- 如果用 Element Plus，再加：
npm install element-plus（可选，但常见） - 如果需支持 SVG 图标自动导入，可选：
npm install -D vite-plugin-svg-icons
配置 Vite 构建工具
在 vite.config.ts 中加入插件：
-
AutoImport负责自动引入函数：Vue 核心 API、Pinia、Router、UI 库的工具方法等 -
Components负责自动引入组件：本地src/components/下的 .vue 文件，以及 Element Plus 等 UI 组件 - 若使用 Element Plus，需搭配
ElementPlusResolver；其他 UI 库也有对应 resolver
示例配置节选：
立即学习“前端免费学习笔记（深入）”；
vue-admin-change-reviewer
下载
审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
<p>export default defineConfig({
plugins: [
vue(),
AutoImport({
imports: ['vue', 'vue-router', 'pinia'],
resolvers: [ElementPlusResolver()],
dts: './auto-imports.d.ts',
}),
Components({
resolvers: [ElementPlusResolver()],
dts: './components.d.ts',
}),
],
})启用 TypeScript 类型支持
自动导入生成的类型声明文件必须被 TS 识别：
- 确保
tsconfig.json的"include"包含生成的.d.ts文件，例如：
"include": [ "src/**/*.ts", "src/**/*.d.ts", "auto-imports.d.ts", "components.d.ts" ]
保存后重启 TypeScript 服务（VS Code 中可按 Ctrl+Shift+P → “TypeScript: Restart TS server”）。
验证是否生效
新建一个组件，直接写：
<template>
<div>
<MyButton /> <!-- 自动识别 src/components/MyButton.vue -->
<ElInput v-model="search" /> <!-- 自动引入 Element Plus 组件 -->
</div>
</template>
<p><script setup lang="ts">
const search = ref('') // ref 不用 import
watch(search, () => console.log('changed'))
</script>不报错、能正常渲染、TS 提示完整，说明配置成功。
