组件库
组件库介绍
对于前端: UI组件合集 , 包含的每一个组件都遵循一套规则
意义 : 统一的标准化规范 减少维护
一致性 效率 协同
Arco Design
一系列的生态平台
资源工具
| 设计视角 | 研发视角 | 协作关系 |
|---|---|---|
| [x]产出效率 | [x]UI还原细节 | [x]反复验收 |
| [x]设计资源不互通 | [x]迭代升级成本高 | [x]多项目 规范难统一 |
| [x]通用模块复用难 |
Get Started
quick start
required react >= 16.8 , react-dom >= 16.8
react基础语法
引入一个模块 ,打包进去的所有的组件库怎么办?
-
按需加载
-
babel-plugin -
通过CDN 引用
例如codepen
主题定制
修改主题色
一般来说可以用 CSS覆盖
Less变量!
arco less作为css预编译语言
内置了一套颜色算法
组件定制
更精细化调整
Button
Input : 面性 =>线性 ......
Arco Pro
npm i -g arco-cli
DesignLab~
主题在线配置
打包发布后用webpack引入
多项目遵循同意设计规范
Dark Mode
暗黑模式
如何丝滑切换
切换css文件?
实时编译less?
arco怎么做的:
- 写法一致,定义背景色文字色 CSS变量读取
- 操作全局元素的arco-theme
- 局部运用暗色模式? -暗色变量的挂载,挂载在合适区域的dom
国际化
语言!
组件库内置多套语言
如何实时切换语言
没有写死,而是读取全局变量 0渲染
想要的语言没有内置怎么办?
- copy官方的 后自定义ConfigProvider,(或者提PR哈哈)
RTL视图
考虑到中东地区朋友使用习惯
元素方向
布局
margin-left magin-right
交互行为
其他
只是改变了阅读习惯,语义并没有变化
全局配置组件默认属性
一键切换圆角矩形 太酷了
自定义组件
搭建业务组件库
场景组件 抽象 集中维护 版本迭代/ 提高开发效率
FAQ 怎么打包,产物格式,项目中使用,本地预览,展示Demo
-
架构设计
-
单包架构
使用.单包 多组件, 优点 缺点: 1. 改一个组件要更新整个库 2.需要考虑按需加载,不考虑按需加载,产物体积会很大
-
多包架构 组件之间相互独立,单独维护,单独发包,所有组件都在一个库 缺点:相互依赖时需要npm 发包不那么方便(很多的时候,需要包管理工具)
-
-
技术方案
- 本地开发?/实时预览
- 样式方案
- 产物构建: 构建工具 ,cjs,umd,es
- 质量保障 功能稳定性,测试
-
对外文档
- 文档部署
- 组件api 自动化or手写
ts-document
- 版本日志生成 @arco-design/changelog
什么是好的组件?
-
高内聚,低耦合
职责清晰,高可维护性 -
通用性,易扩展
项目组织:
-
语义化命名
-
包名与组件名一致
-
单独维护类型文件,需要的在入口文件导出
-
接口定义
-
统一类名前缀
-
避免样式覆盖
-
避免直接引入样式
-
注意按需加载
