以formsy的需求为例,组件库的创建过程如下: 1.新建文件global/js/dev/UIComponents.es(目录不固定,暂时存于此); 2.引入依赖: import React from 4.将组件加入依赖配置 UIComponents组件将会成为项目中的基础依赖被多个场景使用,所以将它加入依赖配置文件,方便开发工作。 在global/js/dev/main.es中的path中添加如下配置: // 自定义组件 'UIComponents': './.. /js/prod/UIComponents' 3.2.2 Login组件重构 组件库创建完毕后,开始进行前端react组件的重构工作,以下内容以Login组件为例。 之前使用jquery validation已经完成了isSignname的验证规则制定,现在我们将它迁移到formsy,在UIComponents.es中添加代码如下: /** * @desc 登录名判断
- commons (业务公用框架库) - uicomponents (公用页面,组件库) - 存放所有可复用的UI组件和页面模板。
|---Main.ets // 首页| |---HeartRate.ets // 实时心率图|---uicomponents
这里要注意点 这里再feture文件夹下创建三个模块从而实现首页、课程学习、知识地图这三个功能 创建commons层模块,与创建features层的模块一样,在commons文件夹中,创建两个模块utils和uicomponents
{reactVersion:'^19.0.0',stateManagement:'Zustand',routing:'ReactRouter7',httpClient:'统一封装的FetchAPI',uiComponents
// 客户端连接页面 | |---HeartRate.ets // 连接成功后,侦听到服务端的心率数据 |---uicomponents
1.2UpdateuseTodos.ts:persist/restoredue_dateinlocalStorage-[]1.3UpdateaddTodo()andeditTodo()toacceptdue_dateparam##2.UIComponents
test:/[\\/]src[\\/]core[\\/]/,priority:20,name:'supply-chain-core',minSize:10000//10KB以上才独立分包},//UI组件分组uiComponents
INFO] ProcessorPluginUI [INFO] ProjectUI [INFO] RankingAPI [INFO] RankingPlugin [INFO] UIUtils [INFO] UIComponents