Vue3中通过unplugin-auto-import插件实现ref、computed等API自动导入，无需手动import；需配置vite.config.ts、tsconfig.json及ESLint以支持类型提示和语法校验。
Vue 3 的 <script setup></script> 本身不支持全局变量，但配合 Vite 插件可以实现“看似全局”的函数自动导入——不用写 import { ref, computed, useRouter } from 'vue' 这类语句，直接用就行。核心靠的是 unplugin-auto-import 在编译时静态分析并自动注入 import 声明，同时生成类型声明保障 TS 和 IDE（如 VS Code）的智能提示。
安装与基础配置
在项目中安装插件：
npm install -D unplugin-auto-import- 确保已启用
@vitejs/plugin-vue（Vue 官方插件，默认包含）
在 vite.config.ts 中添加插件配置：
import AutoImport from 'unplugin-auto-import/vite'
export default defineConfig({
plugins: [
vue(),
AutoImport({
imports: ['vue', 'vue-router', 'pinia'],
dts: 'src/auto-imports.d.ts' // 生成类型声明文件
})
]
})
让 TypeScript 和编辑器识别自动导入
仅配置插件还不够，VS Code 或其他编辑器需要知道这些自动引入的变量有类型定义。需在 tsconfig.json 的 include 字段中加入生成的声明文件：
"include": [ "src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "src/auto-imports.d.ts" // ← 关键一行 ]
保存后重启 TS 服务（或重启编辑器），ref、computed 等就能获得完整类型提示和跳转支持。
支持自定义工具函数和组合式函数
除了 Vue 生态，你还可以让插件自动导入自己写的工具：
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
- 把常用函数放在
src/composables/useApi.ts、src/utils/request.ts等目录下 - 在
AutoImport配置中指定dirs：
AutoImport({
imports: ['vue'],
dirs: ['src/composables', 'src/utils'], // 自动扫描这些目录下的导出
dts: 'src/auto-imports.d.ts'
})
只要这些文件默认导出或具名导出函数（如 export function useLoading()），就能在任意 <script setup></script> 中直接调用，无需 import。
避免 ESLint 报错
ESLint 默认会报 no-undef 错误（如 “ref is not defined”）。解决方法是启用插件的 ESLint 支持：
AutoImport({
imports: ['vue'],
eslintrc: {
enabled: true,
filepath: '.eslintrc-auto-import.json'
}
})
首次启动开发服务器后，插件会自动生成该 JSON 文件，里面列出了所有被自动导入的变量。然后在项目根目录的 .eslintrc.js 或 .eslintrc.cjs 中 extends 它：
module.exports = {
extends: [
'./.eslintrc-auto-import.json', // ← 加入这一行
'eslint:recommended',
'@typescript-eslint/recommended'
],
// ...
}
这样 ESLint 就不会再误报未定义变量了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
