构建button组件
在后续组件开发过程中,新增组件的目录结构与 button 组件一致,并将新增的组件导入 packages/components/index.ts 和 packages/components.ts 两个文件,便可自动完成组件的按需加载和全局注册。
（1）创建按钮组件
在 components 目录下创建 button 组件
推荐的目录结构
1.
2├─ packages
3│ ├─ components
4│ │ ├─ button # 组件根目录
5│ │ │ ├─ style # button 组件的样式目录
6│ │ │ ├─ src
7│ │ │ │ └─ button.vue # button 组件的UI渲染文件
8│ │ │ └─ index.ts # 访问 button 组件的入口文件
9│ │ ├─ index.ts # 导出 components 下的所有组件
10│ │ └─ package.json
11│ ├─ utils
12│ │ ├─ install.ts
13│ │ └─ package.json
14│ ├─ component.ts
15│ └─ index.ts
16└─ package.json
1<script setup lang="ts">
2defineOptions({
3 // 组件名称
4 name: "BButton",
5});
6</script>
7
8<template>
9 <button>这是一个测试的按钮</button>
10</template>
11
12<style lang="scss" scoped></style>
:::
（2）按需加载并导出组件
在 utils 工具类中建立 install.ts 文件,定义 registerComponent 方法用于注册组件。
1import type { App, Component } from "vue";
2
3/**
4 * 可安装组件类型
5 * 继承自Vue的Component类型,并添加了name属性和install方法
6 */
7export type InstallableComponent = Component & {
8 name: string;
9 install: (app: App) => void;
10};
11
12/**
13 * 将普通组件转换为可安装组件
14 * @param component 要注册的 Vue 组件
15 * @returns 返回一个可安装的组件
16 */
17export const registerComponent = (
18 component: Component
19): InstallableComponent => {
20 // 将传入组件转换为 InstallableComponent 类型
21 const installable = component as InstallableComponent;
22
23 // 为组件添加 install 方法
24 installable.install = (app) => {
25 // 在 Vue引用中注册该组件
26 app.component(installable.name, installable);
27 };
28 return installable;
29};
1export * from "./install";
:::
在 components/button/index.ts 中引入 registerComponent 方法,并导出 BButton 组件
1// 引入工具类的 registerComponent 方法
2import { registerComponent } from "@better-ui/utils";
3
4import Button from "./src/button.vue";
5
6// 提供按需加载的方式
7export const BButton = registerComponent(Button);
8
9// 导出组件
10export default BButton;
在 components/index.ts 中,汇总并导出所有 按需加载 的组件：
1export * from "./button";
（3）全局注册导出组件
全局注册组件是将所有组件汇聚到一个文件中,使用循环的方式批量注册组件。
在 packages 目录下新建 components.ts 文件和 index.ts 文件。
1import { BButton } from "@better-ui/components";
2
3// 使用数组的方式导出,便于循环批量注册
4export default [BButton];
1import type { App } from "vue";
2
3// 按需加载
4export * from "./components/index";
5
6// 全局注册
7import components from "./components";
8
9// 全局安装
10export const install = (app: App) => {
11 // 判断是否安装
12 if (install.installed) return;
13 // 安装组件
14 components.forEach((com) => {
15 app.use(com);
16 });
17};
18
19export default install;
:::
这样,您就可以通过 packages/index.ts 作为入口,全局注册或按需加载组件了。注意,按需加载组件时,样式的处理可能需要额外的配置以确保样式的正确加载。
