Skip to main content
组件库设计方案

为什么要封装组件库？

背景

当前公司/团队内部维护着部分B端系统，B 端系统与C端系统对比，通常有以下特点：

  1. 组件重复度较高，用户界面定制化程度相对较小：通常主要为表格、表单、搜索、弹窗等；
  2. 存在大量数据展示：包含更多的表单、表格、图表和仪表盘。
  3. 与服务端数据交互频繁：B端系统可能需要处理大量数据和复杂计算，需要更多的数据接口；

当前团队内部 B 端/内部系统 现状：

SewenAbout 13 min组件组件库设计方案
JSON配置化组件

JSON 配置化组件是对 element-plus 组件的二次封装，通过二次封装 elementPlus 组件后，可以通过 JSON 配置生成 elements 组件

设计思路

一个业务组件，是对基础组件的二次封装，可以将业务组件拆分为以下几个部分：

  • 视图组件 JSON 对象：描述视图有哪些组件组成的 JSON 对象；
  • 业务逻辑 JSON 对象：描述组件的逻辑，包括组件事件描述，组件对象描述；
  • 服务端数据 JSON 对象： 渲染组件数据内容，通过数据动态渲染组件内容；
SewenAbout 30 min组件JSON配置化组件