组件库介绍

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

前端UI组件：即“按钮”、“输入框”、“下拉选择”都是组件，组件和组件的组合就变成了一个更复杂的组件。

组件库：一系列UI组件的合集，具有一致性、效率、协同等特点

arco.design组件库：生态平台、资源+工具、设计系统基础。围绕设计产出效率提升、协作效率提升、研发开发效率提升进行构建

组件库的使用

引入组件库

按需加载插件 babel-plugin-import 避免未被使用的代码被打包到js文件中

主题定制-less变量：

1、通过修改less变量，对less样式进行定制

2、通过webpack.config.js中进行修改

组件定制

Arco Pro

预装环境：npm i -g arco-cil

项目初始化：Arco init hello-arco-pro

项目开发：cd hello-arco-pro yarn dev

DesignLab

通过Arco插件引入

暗黑模式

（1）在不同模式下改变的只有颜色。尺寸，边距等没有改变

（2）代码写法一致，读取到的变量值不同

（3）arco-theme=dark，读取暗色模式css变量；移除arco-theme，读取亮色模式css变量

局部应用暗色模式

思路：本质上使控制暗色颜色变量的挂载位置，提高我们所需要的颜色变量的优先级

ConfigProvider

ConfigProvider: 利用 React Context，为所有组件提供统一的全局配置。 语言配置： locale

是否开启rtl视图： rtl

组件类名前缀： prefixCls

组件默认尺寸： size

组件默认属性： componentConfig

自定义组件

业务组件库搭建：

通过通用业务组件库，保障规范性，稳定性，提高业务开发效率

搭建业务组件库的关键点

1、架构设计

（1）单包架构

一个代码仓库里所有组件打包成一个整体，发布出去一个npm 包；从一个包名里面引用了多个组件，去进行组合使用

（2）多包架构

一个代码仓库包含多个组件代码，会发布出去多个npm 包。

2、技术方案

（1）开发环境

打包速度 实时预览，如 storybook

（2）样式方案

样式方案: Less / Sass，CSS in JS，CSS 等

组件库换肤，样式定制等能力

（3）产物构建

构建工具 webpack， rollup， vite ， gulp 等

产物格式: cjs，umd，es

（4）质量保障

测试工具: jest ，karma，mocha,enzyme,react-testing-llbrary 等

测试类型:单元测试，快照测试 ，截屏测试，e2e 测试等

（5）组件开发

3、对外文档

（1）Demo展示

Demo 展示: Storybook，umijs 等

静态内容: markdown

（2）组件API生成

手写

自动提取:ts-docuemnt 等

（3）版本日志

手写

自动提取: 从PR 提交记录自动提取 @arco-design/changelog