自定义UI 组件库的使用---局部全局注册

自定义 UI 组件库的使用—局部/全局注册

基本使用

任务目标: 把组件库从素材文件夹，复制到项目中使用。

核心步骤：

1. 复制素材中的 XtxUI文件夹，放到 src/components 中。
2. yarn lint 或 npm run lint 格式化文件。
3. 使用组件库提供的组件。

新建测试页面：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>

全局注册组件

核心步骤：

1. 新建文件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

2. 在main.ts中全局注册

import XtxUI from "./components/XtxUI";

const app = createApp(App)
app.use(XtxUI)

3. 在页面中使用

<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 {};