自定义 UI 组件库的使用—局部/全局注册
基本使用
任务目标: 把组件库从素材文件夹,复制到项目中使用。
核心步骤:
- 复制素材中的
XtxUI
文件夹,放到src/components
中。 yarn lint
或npm run lint
格式化文件。- 使用组件库提供的组件。
新建测试页面:src\views\Test\index.vue
局部注册组件
<script setup lang="ts">
// 同一个 import 可以同时导入多个组件
import { XtxSkeleton, XtxButton } from "@/components/XtxUI/index";
</script>
<template>
<!-- 鼠标悬停检查 TS 类型 -->
<XtxButton type="primary" size="large">按钮</XtxButton>
<XtxSkeleton :height="30" :width="100" bg="pink" />
</template>
全局注册组件
核心步骤:
- 新建文件
components/XtxUI/index.ts
import type { App, Plugin } from 'vue'
import { XtxButton, XtxSkeleton } from './XtxUI'
const XtxUI: Plugin = {
install(app: App) {
app.component('XtxSkeleton', XtxSkeleton), app.component('XtxButton', XtxButton)
}
}
export default XtxUI
- 在
main.ts
中全局注册
import XtxUI from "./components/XtxUI";
const app = createApp(App)
app.use(XtxUI)
- 在页面中使用
<script setup lang="ts">
</script>
<template>
+ <!-- 🐛问题:鼠标悬停为 any,失去 TS 类型检查 -->
<XtxButton type="primary" size="large">按钮</XtxButton>
<XtxSkeleton :height="30" :width="100" bg="pink" />
</template>
- 🐛问题:全局组件注册成功,但是调用时没有 TS 类型提示。
- 解决方案:为组件库创建对应的类型声明文件。
全局组件 TS 类型声明文件🚨
任务目标: 为全局组件书写对应的 TS 类型声明文件。
- 用法参考:
element-plus
源码 Element-Plus 源码链接 Volar
插件说明:Volar 插件说明
新建类型声明文件: src\components\XtxUI\global.d.ts
,准备基本结构
// 全局组件类型声明文件 for Volar
declare module 'vue' {
// 全局组件需要定义 interface GlobalComponents
export interface GlobalComponents {
全局组件名: 组件类型;
}
}
export { }
添加全局组件类型声明:
// 导入 .vue 源文件
import Button from "./Button/index.vue";
import Skeleton from "./Skeleton/Skeleton.vue";
// 全局组件类型声明文件 for Volar
declare module "vue" {
// 全局组件需要定义 interface GlobalComponents
export interface GlobalComponents {
// typeof 获取 TS 类型
XtxButton: typeof Button;
XtxSkeleton: typeof Skeleton;
}
}
export {};