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组件库底层逻辑的读者。本书也可作为高等院校计算机相关专业的师生用书和培训学校的教材。

第1章 初识UI组件库\t1
1.1 UI组件库是什么\t1
1.2 UI组件库的作用\t1
1.3 UI组件库的应用\t2
本章小结\t2
第2章 UI组件库的开发规范\t3
2.1 命名规范\t3
2.2 目录结构\t3
2.3 组件结构\t4
2.4 样式规范\t5
2.5 组件文档\t6
2.6 版本管理\t6
本章小结\t7
第3章 使用Monorepo构建组件库\t8
3.1 安装pnpm\t8
3.2 初始化UI组件库\t9
3.2.1 建立工作区\t9
3.2.2 建立UI组件库包\t9
3.2.3 调用UI组件库包\t10
3.3 初始化演示库\t11
3.4 构建组件的目录结构\t13
3.4.1 构建按钮组件\t13
3.4.2 按需加载并导出组件\t13
3.4.3 全局注册导出组件\t14
3.5 演示库测试组件\t15
3.5.1 全局注册\t15
3.5.2 按需加载\t16
本章小结\t16
第4章 CSS架构模式\t17
4.1 UI组件库元素设计规范\t17
4.2 BEM命名规则\t18
4.3 命名空间\t19
4.4 封装BEM命名规则\t20
4.4.1 生成Block\t21
4.4.2 生成Element和Modifier\t22
本章小结\t23
第5章 按钮组件\t24
5.1 theme：主题包\t24
5.1.1 全量引入\t25
5.1.2 按需引入\t25
5.2 渲染button组件\t26
5.3 theme：主题色渲染\t27
5.4 round：圆角按钮\t30
5.5 disabled：禁用按钮\t31
5.6 text：文字按钮\t32
5.7 link：链接按钮\t33
5.8 border：边框按钮\t35
5.9 block：块级按钮\t36
5.10 size：按钮尺寸\t37
5.11 circle：圆形按钮\t38
5.12 icon：图标按钮\t40
5.13 loading：加载按钮\t41
5.13.1 手动触发加载\t41
5.13.2 自动触发加载\t43
5.14 group：按钮组\t44
5.14.1 插槽实现按钮组\t45
5.14.2 父级组件的属性\t46
本章小结\t47
第6章 Sass制定组件库全局变量\t48
6.1 deep-merge：定义主题色\t48
6.2 mix：生成主题色层次\t49
6.2.1 定义@mixin方法\t50
6.2.2 each、for：循环生成层次色调\t51
6.3 定义中性色及其他元素\t52
6.4 :root伪类选择器\t54
6.5 生成:root变量\t54
6.5.1 定义前缀、块、修改器变量\t55
6.5.2 :root变量名称的生成规则\t56
6.5.3 生成层次色\t57
6.5.4 获取:root变量名称\t58
6.6 UI组件库全局规范\t59
6.7 UI组件库应用规范\t61
6.7.1 button组件可变化的属性\t61
6.7.2 私有变量\t62
6.7.3 绑定变量\t64
6.7.4 主题\t64
6.7.5 尺寸\t67
6.7.6 文字尺寸\t68
6.7.7 链接按钮\t69
6.7.8 文字按钮\t71
6.8 遵循BEM命名规则生成组件类名\t72
6.8.1 生成块的类名\t72
6.8.2 生成元素的类名\t73
6.8.3 生成修改器的类名\t73
6.8.4 生成状态的类名\t74
本章小结\t75
第7章 图标组件\t76
7.1 构建icon组件\t76
7.2 渲染icon组件\t77
7.3 尺寸与颜色\t78
7.4 SVG图标\t79
7.5 button组件使用SVG图标\t80
本章小结\t81
第8章 输入框组件\t82
8.1 渲染input组件\t82
8.1.1 构建组件\t82
8.1.2 渲染组件\t83
8.1.3 样式变量\t84
8.2 disabled：禁用\t86
8.3 placeholder：占位符\t87
8.4 maxlength：长度\t88
8.5 size：尺寸\t89
8.6 round：圆角\t90
8.7 icon：图标\t91
8.7.1 渲染UI组件库内置的SVG图标\t92
8.7.2 渲染iconfont字体图标\t94
8.8 slot：前置、后置\t96
8.8.1 渲染前置、后置组件\t97
8.8.2 渲染前置、后置标识\t99
8.8.3 渲染前缀、后缀标识\t101
8.9 password：密码\t102
8.10 value：数据双向绑定\t104
8.11 clear：清除数据\t105
8.12 count：统计字符数\t107
8.13 width：宽度\t109
8.14 event：事件\t110
8.14.1 focus和blur\t110
8.14.2 mouseenter和mouselevel\t112
8.14.3 compositionstart、compositionupdate和compositionend\t113
8.14.4 change、keydown和keyup\t115
8.15 expose：暴露对象\t116
8.16 textarea：文本域\t117
本章小结\t118
第9章 布局组件\t119
9.1 grid：栅格分栏\t119
9.1.1 渲染grid组件\t119
9.1.2 CSS弹性布局\t121
9.1.3 gutter：间距分隔\t122
9.1.4 offset：偏移\t124
9.1.5 justif：对齐\t125
9.1.6 gap：行间距\t126
9.2 container：容器组件\t127
9.2.1 容器组件的结构\t127
9.2.2 容器外层\t128
本章小结\t130
第10章 多选框组件\t131
10.1 渲染checkbox组件\t131
10.1.1 构建组件\t131
10.1.2 渲染组件\t133
10.1.3 样式变量\t134
10.2 theme：主题\t135
10.2.1 生成主题变量\t136
10.2.2 渲染主题\t136
10.3 size：尺寸\t138
10.3.1 定义size变量\t138
10.3.2 配置size变量\t140
10.4 composables：组合式函数\t140
10.4.1 定义状态模块\t141
10.4.2 应用状态模块\t141
10.5 disabled：禁用\t142
10.6 group：多选框组\t144
10.6.1 provide、inject：通信\t145
10.6.2 size：尺寸\t146
10.7 model：数据绑定\t147
10.7.1 数据模块定义\t147
10.7.2 数据测试\t148
10.8 checked：勾选\t149
10.8.1 checkbox组件\t150
10.8.2 checkboxGroup组件\t151
10.9 event：事件\t152
10.10 async：异步\t154
10.10.1 渲染加载效果\t154
10.10.2 事件交互\t155
10.10.3 数据交互\t157
10.11 all：全选\t158
10.11.1 渲染全选组件\t158
10.11.2 渲染部分选中状态\t159
10.11.3 存储选项数据\t161
10.11.4 全选交互\t162
本章小结\t163
第11章 开关组件\t164
11.1 渲染switch组件\t164
11.1.1 构建组件\t164
11.1.2 渲染组件\t165
11.1.3 私有全局变量\t167
11.1.4 私有样式变量\t168
11.2 theme：主题\t169
11.3 size：尺寸\t171
11.4 text：文字\t172
11.5 icon：图标\t173
11.6 centerIcon：中心圆图标\t173
11.7 disabled：禁用\t174
11.8 model：数据绑定\t176
11.9 value：值\t177
11.10 async：异步\t177
11.11 transition：过渡动画\t179
本章小结\t180
第12章 表单组件\t181
12.1 渲染form组件\t181
12.1.1 构建组件\t181
12.1.2 渲染组件\t182
12.1.3 文本区域\t184
12.2 AsyncValidator：校验库\t185
12.3 rules：数据规则\t186
12.4 validate：校验函数\t187
12.5 trigger：校验规则类型\t189
12.6 merge：合并校验规则\t191
12.7 validate：数据校验\t192
12.8 submit：提交校验\t193
12.8.1 存储formItem组件数据\t194
12.8.2 调用form组件校验\t195
12.8.3 指定字段校验\t196
12.9 reset：重置\t197
12.10 required：必填标识\t198
12.11 size：尺寸\t198
本章小结\t199
第13章 消息提示组件\t200
13.1 createVNode函数\t200
13.1.1 基本语法\t200
13.1.2 属性及事件\t201
13.2 渲染message组件\t202
13.2.1 构建组件\t202
13.2.2 渲染组件\t204
13.3 transition：过渡动画\t206
13.3.1 transition组件\t206
13.3.2 动画实现\t206
13.3.3 动画过程\t207
13.3.4 钩子函数\t209
13.4 attribute：初始化属性\t210
13.5 z-index：层级顺序\t211
13.6 top：顶部偏移\t212
13.6.1 存储message组件\t213
13.6.2 计算top偏移\t214
13.7 autoClose：自动关闭\t216
13.8 handleClose：手动关闭\t218
13.9 allClose：全部关闭\t219
13.10 theme：主题\t219
13.11 background：背景颜色\t220
13.12 主题方法\t222
本章小结\t223
第14章 模态框组件\t224
14.1 mask：遮罩层\t224
14.1.1 构建组件\t225
14.1.2 渲染组件\t226
14.2 modal：对话框\t228
14.2.1 构建结构\t228
14.2.2 渲染组件\t229
14.3 teleport：传送\t231
14.4 transition：过渡动画\t231
14.5 footer：脚部\t233
14.5.1 按钮属性\t233
14.5.2 脚部插槽\t234
14.5.3 按钮事件\t235
14.6 loading：加载\t236
14.6.1 confirmLoading属性\t236
14.6.2 beforeChange属性\t238
14.7 event：事件回调\t239
14.8 maskClose：遮罩关闭\t240
14.9 unmount：销毁\t241
14.10 width：宽度\t242
14.11 fixedScreen：固定屏\t243
本章小结\t245
第15章 对话框组件\t246
15.1 构建组件\t246
15.2 title：标题\t248
15.3 content：内容描述\t250
本章小结\t252
第16章 抽屉组件\t253
16.1 构建组件\t253
16.2 placement：方向\t254
16.2.1 absolute：绝对定位\t255
16.2.2 position：位置\t256
16.3 size：尺寸\t257
16.4 transition：过渡动画\t258
本章小结\t259
第17章 构建UI组件库文档\t260
17.1 VitePress\t260
17.1.1 初始化文档\t260
17.1.2 配置导航栏\t263
17.1.3 配置侧边栏\t264
17.2 解析Markdown文件\t265
17.2.1 主题入口\t266
17.2.2 注册全局组件\t267
17.2.3 markdown-it-container\t267
17.2.4 tokens容器\t269
17.3 UI组件库解析\t271
17.3.1 定义文档组件\t271
17.3.2 读取容器信息\t272
17.3.3 读取文档组件\t273
17.3.4 渲染组件\t274
17.3.5 代码高亮\t277
17.3.6 展开/收起源码\t279
17.4 撰写组件库文档\t281
17.4.1 Markdown语法\t281
17.4.2 Markdown扩展功能\t281
17.4.3 Markdown表格\t282
本章小结\t284
第18章 UI组件库的打包和发布\t285
18.1 了解Rollup\t285
18.1.1 初始化Build打包目录\t286
18.1.2 Rollup的基础配置\t287
18.1.3 配置打包路径\t288
18.2 UMD打包\t289
18.2.1 输出UMD组件包\t290
18.2.2 测试UMD组件包\t291
18.3 ESM、CJS模块化打包\t292
18.3.1 ESM、CJS打包输出\t292
18.3.2 测试模块化组件包\t296
18.4 Gulp打包scss文件\t298
18.4.1 全量打包CSS\t298
18.4.2 按需加载打包CSS\t299
18.5 Gulp多任务\t301
18.5.1 series()和parallel()\t301
18.5.2 删除组件包\t302
18.5.3 生成package.json文件\t303
18.6 npm发布\t305
18.6.1 package.json文件\t305
18.6.2 version\t306
18.6.3 peerDependencies\t307
18.6.4 发布组件库\t309
18.6.5 打包组件库文档\t310
18.6.6 按需引入组件样式\t311
本章小结\t312