3.4.1 构建button组件
packages是UI组件库的整个包，该目录已经建立了components目录，也就是放置所有组件的目录。构建button组件，即是在components目录下建立button文件夹，如图3-11所示。
图3-11 button组件结构目录
图3-11中红框是button组件的基础结构。button目录是组件的根目录；index.js是访问button组件的入口文件；src目录下的index.vue文件是button组件的UI渲染文件；style目录是button组件的样式文件；button组件的index.vue如代码清单library-03-4所示。
代码清单 library-03-4
> packages/components/button/src/index.vue：
<template>
<button>这是一个测试的按钮</button>
</template>
<script>
export default { name: 'a-button' };
</script>
上述代码清单定义了button组件的name为“a-button”，其中的“a-”是组件前缀。前缀是为了避免命名冲突和提高代码可读性，“a-”是UI组件库的统一前缀，如同Element Plus的“el-”、Ant Design的“a-”。
UI组件库的统一前缀可自定义，不一定使用“a-”。
3.4.2按需加载导出
组件导出可以在项目中多次使用，减少重复编写代码的工作量，有助于模块化开发，提高项目的可维护性和可扩展性。同时也可以将特定功能或界面的实现细节封装起来，使其他开发人员可以直接使用组件而不必关心内部实现细节。因此，我们只需要将src/index.vue文件引入到index.js，并使用export default导出并提供按需加载的方式，如代码清单所示。
> packages/utils/install.js
export const componentInstall = (com) => {
com.install = (app) => {
app.component(com.name, com)
}
return com
}
> packages/components/button/index.js：
import { componentInstall } from "@ui-library/utils"
import Button from "./src/index.vue"
// 提供按需加载的方式
export const AButton = componentInstall(Button)
// 导出组件
export default AButton
> packages/components/index.js
export * from "./button"
上述代码清单中在utils工具类建立了install.js文件，定义了componentInstall方法作用于组件的注册（第2~7行）。该方法中app.component是Vue3.js的实例对象（第4行），第一个参数是组件名称，会自动获取组件内的name属性值；第二个参数则是要注册的组件；然后再将组件返回即可（第6行）。
button组件中引入工具类的componentInstall方法（第10行），调用componentInstall方法时传入button组件（第13行），然后将返回的组件赋给变量AButton并使用export关键字导出组件，提供按需加载功能（第13行），同时也使用export default导出组件（第14行）。
最后一步则是在components/index.js文件导出button组件。components/index.js是所有“按需加载”组件的汇总，后续增加新的组件都需要在该文件导出。
3.4.3全局注册导出
全局注册导出组件同样是将所有组件汇聚到一个文件，使用循环的方式批量注册组件，如代码清单所示。
> packages/components.js
import { AButton } from "./components/button/index.js"
export default [ AButton ]
> packages/index.js：
// 按需加载
export * from "./components/index"
// 全局注册
import components from "./components.js";
// 全局安装
const install = function (app) {
// 判断是否安装
if (install.installed) return;
// 安装组件
components.forEach((c) => app.use(c))
};
export default install
packages目录下新建components.js文件，将button组件引入（第2行），然后使用Array数组将button组件导出（第3行）。将components.js文件引入到packages/index.js文件中（第9行），然后定义函数install并定义app作为参数接收Vue3.js实例对象注册所有组件（第11~16行）。优先判断install.installed是否已安装，如果已安装，则return（第13行），反之使用forEach方法循环数据（第15行）并调用app.use对象注册组件（第15行），最后便是使用export default导出函数install。
其中要注意的是，packages/index.js文件同时导出了按需加载的组件（第7行），这是因为组件库无论是“按需加载”还是“全局注册”都是通过packages/index.js作为入口打包所有组件，因此需要在该文件中导出按需加载的组件。
按需加载目前仅仅是可以加载组件，而组件的样式需要在打包组件库的过程重新对样式的引用路径做处理，并且需要达到自动按需加载组件样式的目的。打包组件库采用的是Rollup，如果您想更快的了解到Rollup打包组件库，可阅读第18章。
