01 组件库介绍
组件库介绍——什么是组件？
组件(Component)
- 部件 part，component，unit，assembly
- 元件 element, component, cell
- 构件 member, component, part
- 组成 composition,component, element, part
- 分枝 branch, branching, bifurcation, component
组件库介绍——组件
前端UI组件
“按钮”、“输入框”、“下拉选择”都是组件，组件和组件组合就变成了一个更复杂的组件。
社区组件库
组件库介绍——组件库
组件库：一系列UI组件的合集。
组件库——showcase
一致性、效率、协同
ArcoDesign
02 组件库的使用
快速上手
引入组件库
需要同时安装 react >= 16.8 和 react-dom >= 16.8 >
npm i @arco-design/web-react
基础使用
import React from "react"; import ReactDOM from “react-dom"; import { Button } from “@arco-design/web-react"; import“@arco-design/web-react/dist/css/arco.css";
ReactDOM.render( Hello Arco, document.querySelector("#root") );
安装按需加载插件 babel-plugin-import 修改 Babel 配置，引入插件
通过CDN使用
开发环境: unpkg.com/@arco-desig… 生产环境: unpkg.com/@arco-desig… 图标: unpkg.com/@arco-desig…
主题定制
通过CSS进行样式覆盖
修改Less变量
组件定制
快速上手 - Arco Pro
DesignLab
暗黑模式
国际化
RTL视图
RTL视图实现浅析
ConfigProvider - 全局配置组件默认属性
可能关注的点?
03 自定义组件
**业务组件库搭建
怎么打包组件库? 产物应该是什么格式? 如何在项目里使用? 怎么本地开发预览? 怎么保障质量? 怎么展示 Demo ?
关键点:
架构设计:单包构架,多包构架 技术方案:开发环境,样式方案,产物构建,质量保障,组件开发 对外文档:Demo展示,组件API生成,版本日志
架构设计:单包架构: 一个代码仓库里所有组件打包成一个整体，发布出去一个 npm 包.多包架构:一个代码仓库包含多个组件代码，会发布出去多个 npm 包。
是否组件间相互依赖较多 ? 是否存在较多公用代码? 是否需要独立发包，版本控制? 其他...
答案是:根据实际业务场景选择合适的架构
组件开发规范
什么是好的组件?
项目组织
- 语义化命名
- 包名和组件名最后一致
- 单独维护类型文件
项目组织 好 VS 坏
组件设计
- 组件属性定义
- 类名前缀统一
- 避免行内样式
- 避免在 JS 中耦合 CSS
- 注意样式的按需加载
示例实践 guide-tip
业务组件快速托管
04 笔记总结
组件库使用
- 组件库引入
- 主题定制
- 亮/暗色模式切换
- 国化
- 自定义组件默认配置
自定义组件开发
- 单包架构和多包架构
- 什么是好的组件
- 组件开发规范
- 组件快速托管
扩展
组件库相关的是有一个叫微搭的平台，那个是用来开发微信小程序的，可视化操作，低代码量（虽然最后我没搞出来）。
