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

示例配置节选：

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',
}),
],
})</p>

启用 TypeScript 类型支持

自动导入生成的类型声明文件必须被 TS 识别：

vue-admin-change-reviewer

审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。

下载

• 确保 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></mybutton><!-- 自动识别 src/components/MyButton.vue --><elinput v-model="search"></elinput><!-- 自动引入 Element Plus 组件 -->
</div>
</template><p><script setup lang="ts">
const search = ref('') // ref 不用 import
watch(search, () => console.log('changed'))
</script></p>

不报错、能正常渲染、TS 提示完整，说明配置成功。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！