11.组件库的使用与自定义组件 | 青训营笔记

Aerozw
42 阅读2分钟

组件库的使用与自定义组件

一、组件库的介绍

1. 什么是组件

image.png

软件组件：
封装好的可复用的程序零部件

软件开发 -- 搭积木

前端UI组件
（按钮 下拉栏等） image.png

2. 组件库介绍

一系列UI组件的合集
遵循同一套设计体系 image.png

一致性、效率、协同

3. ArcoDesign

image.png image.png image.png

二、组件库的使用

1. 快速上手

引入组件库

npm安装 image.png image.png

CDN image.png

2. 主题定制

  • CSS覆盖
  • Less变量

DesignLab 提前在网页配置好下需要的组件再引入
image.png

3. 组件定制

进行精细化的组建定制

Acro Pro image.png image.png

4. 暗黑模式

image.png

image.png

局部应用暗色模式
核心思路：控制暗色颜色变量的挂载位置，提高我们所需的颜色变量的优先级
image.png

5. 语言国际化

切换组件展示的语言

image.png image.png

6. RTL视图

image.png image.png

7. ConfigProvider-全局配置组建默认属性

image.png image.png

8. 可能关注的点

image.png

三、搭建业务组件库

image.png

1. 架构设计

  • 单包架构
    一个代码仓库里面所有的组件打包成一个整体，发布出去一个npm包
    image.png image.png
  • 多包架构
    一个代码仓库包含多个组件代码，会发布出去多个npm包 image.png image.png

2. 技术方案

image.png

3. 对外文档

image.png

4. 组件开发

*好的组件

  • 高内聚，低耦合
    职责清晰，高可维护性
  • 通用性，易拓展
    基础组织适用广泛的业务场景，业务组织适用于针对性平台

项目组织

  1. 语义化命名
  2. 包名和组件名一致
  3. 单独维护类型文件

组件设计

  1. 接口定义
  2. 类名前缀统一
  3. 避免行内样式和CSS Modules
  4. 避免在JS中直接映入样式文件
  5. 注意组件样式的按需加载

5. 自定义组件 Guide Tip

image.png

image.png

6. 快速托管

avatar
文章
阅读
粉丝