扩展 UI 库

• github: github.com/easy-page/e…
• 文档站官网：easy-page.github.io/easy-page-d…
• 文档站 github: github.com/easy-page/e…

背景

我们在使用框架的时候，如果只能使用固定的 UI 库，可能不满足公司要求，可能在公司内，需要使用指定的 UI 库，此时我们就可以基于：

• @easy-page/antd-ui

扩展自己的 UI 库。

最快速的扩展方式

预计 1 天左右的工作量，就可以完成 UI 库的扩展。

首先，克隆下：

• git@github.com:easy-page/easy-page.git

找到：packages/easy-page-antd-ui，添加一个你自己的 UI 库：

cd packages/easy-page-antd-ui
pnpm add xxx-ui

然后，逐个对: src/components 里组件进行 UI 替换，如 Checkbox 中，将：

import {
  Checkbox as AntdCheckBox,
  CheckboxProps as AntdCheckBoxProps,
} from 'antd';

改成：

import {
  Checkbox as AntdCheckBox,
  CheckboxProps as AntdCheckBoxProps,
} from 'xxxx-ui';

• 具体的导入，因 UI 库差异而有所不同。

逐个替换完成所有组件后，可能需要结合不同的组件库，做一点 Props 兼容性处理，删除原本的：antd，此时一个 UI 库就扩展好了。

其中比较难扩展的应该是：FormItem、Form、Select 组件的扩展，大家可以参考着自己修改。

扩展 API

除了对基础的 UI 库组件扩展外，我们对于自己使用的 API 也可进行扩展。他们在： packages/easy-page-antd-ui/src/user-apis 中，我们可以参考着默认的： NodeUtil 和 PageUtil 进行自身需要的扩展。