自动导入组件库项目组件与Composition API
概述
本节完成组件库项目组件在宿主应用中的自动导入配置。通过 unplugin-vue-components 和 unplugin-auto-import 两个 Vite 插件，实现组件和 Composition API 的按需自动加载，避免手动 import 语句。
前置验证：Playground 测试
在配置自动导入之前，需先在 playground 项目中验证自定义前缀组件（如 Vp 前缀）是否正常工作。
常见问题排查
- 类型导出失败：
components/types中的类型声明未正确导出，需检查index.ts的导出路径 - 自动化脚本配置错误：
build/scripts中的脚本路径需使用path.join写死component-types目录 - 组件前缀更新：所有组件名需统一添加
Vp前缀
// 自动化脚本修正：固定 component-types 输出路径
const outputPath = path.join(__dirname, 'component-types')
typescript
组件验证清单
| 组件 | 验证项 | 状态 |
|---|---|---|
| VpButton | 基础按钮交互 | 正常 |
| VpIcon | 图标渲染 | 正常 |
| VpEditor | 富文本编辑器（加载稍慢） | 正常 |
| VpAudioPlayer | 音频播放控制 | 正常 |
| VpVideoPlayer | 视频播放控制 | 正常 |
配置 Vite 自动导入
unplugin-vue-components 配置
在宿主项目 vite.config.ts 中配置组件自动导入：
// vite.config.ts
import Components from 'unplugin-vue-components/vite'
export default defineConfig({
plugins: [
Components({
resolvers: [
// 自定义组件库 resolver
{
type: 'component',
resolve: (name: string) => {
if (name.startsWith('Vp')) {
const partialName = name.slice(2)
return {
name: partialName,
from: '@el-admin/components',
}
}
},
},
],
directives: true, // 同时启用指令自动导入
}),
],
})
typescript
unplugin-auto-import 配置
// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite'
export default defineConfig({
plugins: [
AutoImport({
imports: ['vue', 'vue-router'],
resolvers: [],
dts: './auto-imports.d.ts',
}),
],
})
typescript
自动导入架构
组件库项目 宿主项目
┌──────────────────┐ ┌──────────────────┐
│ build/scripts/ │ │ vite.config.ts │
│ ├── components │── resolver ──>│ Components({ │
│ └── hooks │── imports ──>│ resolvers: [] │
│ │ │ }) │
│ 输出: │ │ │
│ - vp-components │ │ AutoImport({ │
│ - vp-auto-imports│ │ imports: [] │
└──────────────────┘ │ }) │
└──────────────────┘
text
提交规范
配置完成后建议做一次代码提交，将 playground 验证通过后的状态保存：
git add .
git commit -m "feat: 配置 unplugin-vue-components 与 unplugin-auto-import"
bash
关键要点
- 组件库的自动化脚本负责生成 resolver 所需的组件名称映射
unplugin-vue-components处理组件自动注册，unplugin-auto-import处理 Composition API 自动导入- 自定义前缀（
Vp）通过 resolver 的resolve函数进行名称解析 - 后续可将
vite.config.ts中的 resolver 配置打包为独立模块供插件使用
↑