【Vue3 知识点总结】告别手写 Import：Vue 3 自动导入指南 (unplugin-auto-import + unplugin-vue-components)

目录一、 核心痛点：样板代码的烦恼二、 解决方案1. 安装插件2. 配置 Vite (vite.config.ts)三、 实战效果1. API 自动导入 (unplugin-auto-import)2. 组件自动导入 (unplugin-vue-components)四、 进阶配置与注意事项1. TypeScript 类型提示2. 自定义路径导入3. 性能与最佳实践五、 总结在现代 Vue 3 开发中，script setup语法糖已经极大地简化了组件逻辑的编写。然而，我们仍然面临两个繁琐的“机械劳动”：API 导入：每次使用ref、computed、watch等 Composition API 时，都要手动从vue导入。组件导入：使用自定义组件或 UI 库组件时，需要手动编写import语句并在components中注册。unplugin-auto-import和unplugin-vue-components能让我们像写原生 JavaScript 一样直接使用这些 API，像使用全局组件一样直接写标签。