课程介绍
一、组件库介绍
二、组件库的使用
三、自定义组件
四、课程总结
一、组件库的介绍
① 什么是组件？
- 组件（component）
名词如下：
- 部件：part，component，unit,assembly
- 元件：element，component，cell
- 构件：composition，component，element，part
- 组成：composition，component，element，part
- 分支：branch，branching，bifurcation，component
2.工业品组件： 具有标准接口和某种功能且可重复用的标准零部件。
② 组件
1.软件组件
封装好的可复用的程序“零部件”。
软件开发 => 搭积木
2.前端UI组件
“按钮”，“输入框”，“下拉选择”都是组件，组件和组件组合就变成了一个更复杂的组件。
3.社区组件库
③ 组件库
1.showcase
- 一致性
- 效率
- 协同
2.ArcoDesign简介
3.ShowCase
二、组件库使用
1. 快速上手
2. 主题定制
3. 暗黑模式
4. 国际化
5. 业务常见问题
1.快速上手
① 引入组件库
通过CDN使用：
典型示例：CodePen
② 主题定制
（我们的品牌色是红色的）
- 通过CSS进行样式覆盖
- 修改Less变量
1.CSS覆盖
2.Less覆盖
3.组件定制
- Button:带有投影效果
- Input:面性 => 线性
- //...
4.Arco Pro
技术栈：
- React
- TypeScript
- BizCharts
- 多架构
- Next.js
- Create React APP
- Vite
预装环境：
npm i -g arco-cli
项目初始化：
arco init hello-arco-pro
项目开发：
cd hello-arco-pro yarn dev
5.DesignLab
6.暗黑模式
局部应用暗色模式
1.核心思路：
本质上是控制暗色颜色变量的挂载位置，提高我们所需要的颜色变量的优先级。
尝试共建：
#1655
参考实现:
核心实现
直接通过ConfigProvider组件传入不同语言文件去修改Locale.
我想要的语言未支持？
可能关注的点：
- 旧项目迁移
- 如何获取OnCall支持
- 更新日志，发版周期
- 如何参与共建
- Codemod代码迁移工具
- 用户群
- Github issue
- 官方文档站
三、自定义组件
- 业务组件搭建
- 组件开发规范
- 示例实践guide-tip
- 业务组件快速托管
1.关键点：
1.架构设计：
- 单包架构
- 多包架构
2.技术方案：
- 开发环境
- 样式方案
- 产物构建
- 质量保障
- 组件开发
3.对外文档
- Demo展示
- 组件API
- 版本日志
2.架构设计：
单包架构：
一个代码仓库里所有组件打包成一个整体，发布出去一个npm包。
多包架构：
一个代码仓库包含多个组件代码，会发布出去多个npm包。
架构设计：
1.是否组件间相互依赖较多？
2.是否存在较多公共代码？
3.是否需要独立发包，版本控制？ 其他...
根据实际业务场景选择合适的架构
聚焦细节：什么是好的组件？
什么是好的组件？
1.项目组织：
- 语义化命名
- 包名和组件最后一致
- 单独维护类型文件
2.组件设计：
- 组件属性定义
- 类名前缀统一
- 避免行内样式
- 避免在JS中耦合CSS
- 注意样式的按需加载
功能要点：
1.控制引导气泡的出现 2.点击下一步/上一步切换气泡卡片的内容 3.气泡卡片的位置跟随变动 4.在最后一步时，显示完成按钮
四、课程总结
1.组件库的使用：
- 组件库引入
- 主题定制
- 亮/暗色模式切换
- 国际化
- 自定义组件默认配置
2.自定义组件开发
- 单包架构和多包架构
- 什么是好的组件
- 组件开发规范
- 组件快速托管
