本书系统全面地介绍了UI组件库的开发过程，包括UI组件库的开发规范、底层逻辑、开发思维，以及UI组件库的运作原理、版本号管理、Markdown文件、npm发布等。本书配有UI组件库设计稿源文件和UI组件库源码，并附带300个左右的Git分支以及与本书代码清单一一对应的实例代码。本书可以帮助读者进一步提升开发能力、业务理解能力，让开发人员更深入地了解CSS的应用，掌握Vue.js 3的新特性，如Composition API、provide、inject、teleport、slot等关于Vue.js 3的开发技巧。 本书适合Web前端开发人员，需要提升自身开发能力或想开发属于自己的UI组件库的读者，以及有兴趣从事Web前端工作、想深入了解UI组件库底层逻辑的读者。本书也可作为高等院校计算机相关专业的师生用书和培训学校的教材。

第1章 初识UI组件库
1.1 UI组件库是什么
1.2 UI组件库的作用
1.3 UI组件库的应用
本章小结
第2章 UI组件库的开发规范
2.1 命名规范
2.2 目录结构
2.3 组件结构
2.4 样式规范
2.5 组件文档
2.6 版本管理
本章小结
第3章 使用Monorepo构建组件库
3.1 安装pnpm
3.2 初始化UI组件库
3.2.1 建立工作区
3.2.2 建立UI组件库包
3.2.3 调用UI组件库包
3.3 初始化演示库
3.4 构建组件的目录结构
3.4.1 构建按钮组件
3.4.2 按需加载并导出组件
3.4.3 全局注册导出组件
3.5 演示库测试组件
3.5.1 全局注册
3.5.2 按需加载
本章小结
第4章 CSS架构模式
4.1 UI组件库元素设计规范
4.2 BEM命名规则
4.3 命名空间
4.4 封装BEM命名规则
4.4.1 生成Block
4.4.2 生成Element和Modifier
本章小结
第5章 按钮组件
5.1 theme：主题包
5.1.1 全量引入
5.1.2 按需引入
5.2 渲染button组件
5.3 theme：主题色渲染
5.4 round：圆角按钮
5.5 disabled：禁用按钮
5.6 text：文字按钮
5.7 link：链接按钮
5.8 border：边框按钮
5.9 block：块级按钮
5.10 size：按钮尺寸
5.11 circle：圆形按钮
5.12 icon：图标按钮
5.13 loading：加载按钮
5.13.1 手动触发加载
5.13.2 自动触发加载
5.14 group：按钮组
5.14.1 插槽实现按钮组
5.14.2 父级组件的属性
本章小结
第6章 Sass制定组件库全局变量
6.1 deep-merge：定义主题色
6.2 mix：生成主题色层次
6.2.1 定义@mixin方法
6.2.2 each、for：循环生成层次色调
6.3 定义中性色及其他元素
6.4 ：root伪类选择器
6.5 生成：root变量
6.5.1 定义前缀、块、修改器变量
6.5.2 ：root变量名称的生成规则
6.5.3 生成层次色
6.5.4 获取：root变量名称
6.6 UI组件库全局规范
6.7 UI组件库应用规范
6.7.1 button组件可变化的属性
6.7.2 私有变量
6.7.3 绑定变量
6.7.4 主题
6.7.5 尺寸
6.7.6 文字尺寸
6.7.7 链接按钮
6.7.8 文字按钮
6.8 遵循BEM命名规则生成组件类名
6.8.1 生成块的类名
6.8.2 生成元素的类名
6.8.3 生成修改器的类名
6.8.4 生成状态的类名
本章小结
第7章 图标组件
7.1 构建icon组件
7.2 渲染icon组件
7.3 尺寸与颜色
7.4 SVG图标
7.5 button组件使用SVG图标
本章小结
第8章 输入框组件
8.1 渲染input组件
8.1.1 构建组件
8.1.2 渲染组件
8.1.3 样式变量
8.2 disabled：禁用
8.3 placeholder：占位符
8.4 maxlength：长度限制
8.5 size：尺寸
8.6 round：圆角
8.7 icon：图标
8.7.1 渲染UI组件库内置的SVG图标
8.7.2 渲染iconfont字体图标
8.8 slot：前置、后置
8.8.1 渲染前置、后置组件
8.8.2 渲染前置、后置标识
8.8.3 渲染前缀、后缀标识
8.9 password：密码
8.10 value：数据双向绑定
8.11 clear：清除数据
8.12 count：统计字符数
8.13 width：宽度
8.14 event：事件
8.14.1 focus和blur
8.14.2 mouseenter和mouselevel
8.14.3 compositionstart、compositionupdate和compositionend
8.14.4 change、keydown和keyup
8.15 expose：暴露对象
8.16 textarea：文本域
本章小结
第9章 布局组件
9.1 grid：栅格分栏
9.1.1 渲染grid组件
9.1.2 CSS弹性布局
9.1.3 gutter：间距分隔
9.1.4 offset：偏移
9.1.5 justif：对齐
9.1.6 gap：行间距
9.2 container：容器组件
9.2.1 容器组件的结构
9.2.2 容器外层
本章小结
第10章 多选框组件
10.1 渲染checkbox组件
10.1.1 构建组件
10.1.2 渲染组件
10.1.3 样式变量
10.2 theme：主题
10.2.1 生成主题变量
10.2.2 渲染主题
10.3 size：尺寸
10.3.1 定义size变量
10.3.2 配置size变量
10.4 composables：组合式函数
10.4.1 定义状态模块
10.4.2 应用状态模块
10.5 disabled：禁用
10.6 group：多选框组
10.6.1 provide、inject：通信
10.6.2 size：尺寸
10.7 model：数据绑定
10.7.1 数据模块定义
10.7.2 数据测试
10.8 checked：勾选
10.8.1 checkbox组件
10.8.2 checkboxGroup组件
10.9 event：事件
10.10 async：异步
10.10.1 渲染加载效果
10.10.2 事件交互
10.10.3 数据交互
10.11 all：全选
1