UI组件库已成为现代前端开发人员的首选工具之一，第三方UI组件库在企业中被广泛使用，但大多数初级、中级前端开发者仅掌握如何应用UI组件库，并未了解其底层原理。本书采用Vue.js技术开发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组件库底层逻辑的读者。本书也可作为高等院校计算机相关专业的师生用书和培训学校的教材。
杨海民，从事Web前端工作十余年，负责各种大中型项目的底层逻辑设计、业务组件库开发、UI组件库开发、交互体验开发等工作。擅长攻克技术难点，提出技术解决方案，分析疑难问题等，涉及微前端、中后台、脚手架、组件库、大屏可视化、小程序等。著有《Vue.js 3.0企业级管理后台开发实战：基于Element Plus》（ISBN：978-7-121-44329-9），并广受好评。
第1章 初识UI组件库 1
1.1 UI组件库是什么 1
1.2 UI组件库的作用 1
1.3 UI组件库的应用 2
本章小结 2
第2章 UI组件库的开发规范 3
2.1 命名规范 3
2.2 目录结构 3
2.3 组件结构 4
2.4 样式规范 5
2.5 组件文档 6
2.6 版本管理 6
本章小结 7
第3章 使用Monorepo构建组件库 8
3.1 安装pnpm 8
3.2 初始化UI组件库 9
3.2.1 建立工作区 9
3.2.2 建立UI组件库包 9
3.2.3 调用UI组件库包 10
3.3 初始化演示库 11
3.4 构建组件的目录结构 13
3.4.1 构建按钮组件 13
3.4.2 按需加载并导出组件 13
3.4.3 全局注册导出组件 14
3.5 演示库测试组件 15
3.5.1 全局注册 15
3.5.2 按需加载 16
本章小结 16
第4章 CSS架构模式 17
4.1 UI组件库元素设计规范 17
4.2 BEM命名规则 18
4.3 命名空间 19
4.4 封装BEM命名规则 20
4.4.1 生成Block 21
4.4.2 生成Element和Modifier 22
本章小结 23
第5章 按钮组件 24
5.1 theme：主题包 24
5.1.1 全量引入 25
5.1.2 按需引入 25
5.2 渲染button组件 26
5.3 theme：主题色渲染 27
5.4 round：圆角按钮 30
5.5 disabled：禁用按钮 31
5.6 text：文字按钮 32
5.7 link：链接按钮 33
5.8 border：边框按钮 35
5.9 block：块级按钮 36
5.10 size：按钮尺寸 37
5.11 circle：圆形按钮 38
5.12 icon：图标按钮 40
5.13 loading：加载按钮 41
5.13.1 手动触发加载 41
5.13.2 自动触发加载 43
5.14 group：按钮组 44
5.14.1 插槽实现按钮组 45
5.14.2 父级组件的属性 46
本章小结 47
第6章 Sass制定组件库全局变量 48
6.1 deep-merge：定义主题色 48
6.2 mix：生成主题色层次 49
6.2.1 定义@mixin方法 50
6.2.2 each、for：循环生成层次色调 51
6.3 定义中性色及其他元素 52
6.4 :root伪类选择器 54
6.5 生成:root变量 54
6.5.1 定义前缀、块、修改器变量 55
6.5.2 :root变量名称的生成规则 56
6.5.3 生成层次色 57
6.5.4 获取:root变量名称 58
6.6 UI组件库全局规范 59
6.7 UI组件库应用规范 61
6.7.1 button组件可变化的属性 61
6.7.2 私有变量 62
6.7.3 绑定变量 64
6.7.4 主题 64
6.7.5 尺寸 67
6.7.6 文字尺寸 68
6.7.7 链接按钮 69
6.7.8 文字按钮 71
6.8 遵循BEM命名规则生成组件类名 72
6.8.1 生成块的类名 72
6.8.2 生成元素的类名 73
6.8.3 生成修改器的类名 73
6.8.4 生成状态的类名 74
本章小结 75
第7章 图标组件 76
7.1 构建icon组件 76
7.2 渲染icon组件 77
7.3 尺寸与颜色 78
7.4 SVG图标 79
7.5 button组件使用SVG图标 80
本章小结 81
第8章 输入框组件 82
8.1 渲染input组件 82
8.1.1 构建组件 82
8.1.2 渲染组件 83
8.1.3 样式变量 84
8.2 disabled：禁用 86
8.3 placeholder：占位符 87
8.4 maxlength：长度限制 88
8.5 size：尺寸 89
8.6 round：圆角 90
8.7 icon：图标 91
8.7.1 渲染UI组件库内置的SVG图标 92
8.7.2 渲染iconfont字体图标 94
8.8 slot：前置、后置 96
8.8.1 渲染前置、后置组件 97
8.8.2 渲染前置、后置标识 99
8.8.3 渲染前缀、后缀标识 101
8.9 password：密码 102
8.10 value：数据双向绑定 104
8.11 clear：清除数据 105
8.12 count：统计字符数 107
8.13 width：宽度 109
8.14 event：事件 110
8.14.1 focus和blur 110
8.14.2 mouseenter和mouselevel 112
8.14.3 compositionstart、compositionupdate和compositionend 113
8.14.4 change、keydown和keyup 115
8.15 expose：暴露对象 116
8.16 textarea：文本域 117
本章小结 118
第9章 布局组件 119
9.1 grid：栅格分栏 119
9.1.1 渲染grid组件 119
9.1.2 CSS弹性布局 121
9.1.3 gutter：间距分隔 122
9.1.4 offset：偏移 124
9.1.5 justif：对齐 125
9.1.6 gap：行间距 126
9.2 container：容器组件 127
9.2.1 容器组件的结构 127
9.2.2 容器外层 128
本章小结 130
第10章 多选框组件 131
10.1 渲染checkbox组件 131
10.1.1 构建组件 131
10.1.2 渲染组件 133
10.1.3 样式变量 134
10.2 theme：主题 135
10.2.1 生成主题变量 136
10.2.2 渲染主题 136
10.3 size：尺寸 138
10.3.1 定义size变量 138
10.3.2 配置size变量 140
10.4 composables：组合式函数 140
10.4.1 定义状态模块 141
10.4.2 应用状态模块 141
10.5 disabled：禁用 142
10.6 group：多选框组 144
10.6.1 provide、inject：通信 145
10.6.2 size：尺寸 146
10.7 model：数据绑定 147
10.7.1 数据模块定义 147
10.7.2 数据测试 148
10.8 checked：勾选 149
10.8.1 checkbox组件 150
10.8.2 checkboxGroup组件 151
10.9 event：事件 152
10.10 async：异步 154
10.10.1 渲染加载效果 154
10.10.2 事件交互 155
10.10.3 数据交互 157
10.11 all：全选 158
10.11.1 渲染全选组件 158
10.11.2 渲染部分选中状态 159
10.11.3 存储选项数据 161
10.11.4 全选交互 162
本章小结 163
第11章 开关组件 164
11.1 渲染switch组件 164
11.1.1 构建组件 164
11.1.2 渲染组件 165
11.1.3 私有全局变量 167
11.1.4 私有样式变量 168
11.2 theme：主题 169
11.3 size：尺寸 171
11.4 text：文字 172
11.5 icon：图标 173
11.6 centerIcon：中心圆图标 173
11.7 disabled：禁用 174
11.8 model：数据绑定 176
11.9 value：值 177
11.10 async：异步 177
11.11 transition：过渡动画 179
本章小结 180
第12章 表单组件 181
12.1 渲染form组件 181
12.1.1 构建组件 181
12.1.2 渲染组件 182
12.1.3 文本区域 184
12.2 AsyncValidator：校验库 185
12.3 rules：数据规则 186
12.4 validate：校验函数 187
12.5 trigger：校验规则类型 189
12.6 merge：合并校验规则 191
12.7 validate：数据校验 192
12.8 submit：提交校验 193
12.8.1 存储formItem组件数据 194
12.8.2 调用form组件校验 195
12.8.3 指定字段校验 196
12.9 reset：重置 197
12.10 required：必填标识 198
12.11 size：尺寸 198
本章小结 199
第13章 消息提示组件 200
13.1 createVNode函数 200
13.1.1 基本语法 200
13.1.2 属性及事件 201
13.2 渲染message组件 202
13.2.1 构建组件 202
13.2.2 渲染组件 204
13.3 transition：过渡动画 206
13.3.1 transition组件 206
13.3.2 动画实现 206
13.3.3 动画过程 207
13.3.4 钩子函数 209
13.4 attribute：初始化属性 210
13.5 z-index：层级顺序 211
13.6 top：顶部偏移 212
13.6.1 存储message组件 213
13.6.2 计算top偏移 214
13.7 autoClose：自动关闭 216
13.8 handleClose：手动关闭 218
13.9 allClose：全部关闭 219
13.10 theme：主题 219
13.11 background：背景颜色 220
13.12 主题方法 222
本章小结 223
第14章 模态框组件 224
14.1 mask：遮罩层 224
14.1.1 构建组件 225
14.1.2 渲染组件 226
14.2 modal：对话框 228
14.2.1 构建结构 228
14.2.2 渲染组件 229
14.3 teleport：传送 231
14.4 transition：过渡动画 231
14.5 footer：脚部 233
14.5.1 按钮属性 233
14.5.2 脚部插槽 234
14.5.3 按钮事件 235
14.6 loading：加载 236
14.6.1 confirmLoading属性 236
14.6.2 beforeChange属性 238
14.7 event：事件回调 239
14.8 maskClose：遮罩关闭 240
14.9 unmount：销毁 241
14.10 width：宽度 242
14.11 fixedScreen：固定屏 243
本章小结 245
第15章 对话框组件 246
15.1 构建组件 246
15.2 title：标题 248
15.3 content：内容描述 250
本章小结 252
第16章 抽屉组件 253
16.1 构建组件 253
16.2 placement：方向 254
16.2.1 absolute：绝对定位 255
16.2.2 position：位置 256
16.3 size：尺寸 257
16.4 transition：过渡动画 258
本章小结 259
第17章 构建UI组件库文档 260
17.1 VitePress 260
17.1.1 初始化文档 260
17.1.2 配置导航栏 263
17.1.3 配置侧边栏 264
17.2 解析Markdown文件 265
17.2.1 主题入口 266
17.2.2 注册全局组件 267
17.2.3 markdown-it-container 267
17.2.4 tokens容器 269
17.3 UI组件库解析 271
17.3.1 定义文档组件 271
17.3.2 读取容器信息 272
17.3.3 读取文档组件 273
17.3.4 渲染组件 274
17.3.5 代码高亮 277
17.3.6 展开/收起源码 279
17.4 撰写组件库文档 281
17.4.1 Markdown语法 281
17.4.2 Markdown扩展功能 281
17.4.3 Markdown表格 282
本章小结 284
第18章 UI组件库的打包和发布 285
18.1 了解Rollup 285
18.1.1 初始化Build打包目录 286
18.1.2 Rollup的基础配置 287
18.1.3 配置打包路径 288
18.2 UMD打包 289
18.2.1 输出UMD组件包 290
18.2.2 测试UMD组件包 291
18.3 ESM、CJS模块化打包 292
18.3.1 ESM、CJS打包输出 292
18.3.2 测试模块化组件包 296
18.4 Gulp打包scss文件 298
18.4.1 全量打包CSS 298
18.4.2 按需加载打包CSS 299
18.5 Gulp多任务 301
18.5.1 series()和parallel() 301
18.5.2 删除组件包 302
18.5.3 生成package.json文件 303
18.6 npm发布 305
18.6.1 package.json文件 305
18.6.2 version 306
18.6.3 peerDependencies 307
18.6.4 发布组件库 309
18.6.5 打包组件库文档 310
18.6.6 按需引入组件样式 311
本章小结 312
书单推荐
