第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:全选
10.11.1 渲染全选组件
10.11.2 渲染部分选中状态
10.11.3 存储选项数据
10.11.4 全选交互
本章小结
第11章 开关组件
11.1 渲染switch组件
11.1.1 构建组件
11.1.2 渲染组件
11.1.3 私有全局变量
11.1.4 私有样式变量
11.2 theme:主题
11.3 size:尺寸
11.4 text:文字
11.5 icon:图标
11.6 centerIcon:中心圆图标
11.7 disabled:禁用
11.8 model:数据绑定
11.9 value:值
11.10 async:异步
11.11 transition:过渡动画
本章小结
第12章 表单组件
12.1 渲染form组件
12.1.1 构建组件
12.1.2 渲染组件
12.1.3 文本区域
12.2 AsyncValidator:校验库
12.3 rules:数据规则
12.4 validate:校验函数
12.5 trigger:校验规则类型
12.6 merge:合并校验规则
12.7 validate:数据校验
12.8 submit:提交校验
12.8.1 存储formItem组件数据
12.8.2 调用form组件校验
12.8.3 指定字段校验
12.9 reset:重置
12.10 required:必填标识
12.11 size:尺寸
本章小结
第13章 消息提示组件
13.1 createVNode函数
13.1.1 基本语法
13.1.2 属性及事件
13.2 渲染message组件
13.2.1 构建组件
13.2.2 渲染组件
13.3 transition:过渡动画
13.3.1 transition组件
13.3.2 动画实现
13.3.3 动画过程
13.3.4 钩子函数
13.4 attribute:初始化属性
13.5 z-index:层级顺序
13.6 top:顶部偏移
13.6.1 存储message组件
13.6.2 计算top偏移
13.7 autoClose:自动关闭
13.8 handleClose:手动关闭
13.9 allClose:全部关闭
13.10 theme:主题
13.11 background:背景颜色
13.12 主题方法
本章小结
第14章 模态框组件
14.1 mask:遮罩层
14.1.1 构建组件
14.1.2 渲染组件
14.2 modal:对话框
14.2.1 构建结构
14.2.2 渲染组件
14.3 teleport:传送
14.4 transition:过渡动画
14.5 footer:脚部
14.5.1 按钮属性
14.5.2 脚部插槽
14.5.3 按钮事件
14.6 loading:加载
14.6.1 confirmLoading属性
14.6.2 beforeChange属性
14.7 event:事件回调
14.8 maskClose:遮罩关闭
14.9 unmount:销毁
14.10 width:宽度
14.11 fixedScreen:固定屏
本章小结
第15章 对话框组件
15.1 构建组件
15.2 title:标题
15.3 content:内容描述
本章小结
第16章 抽屉组件
16.1 构建组件
16.2 placement:方向
16.2.1 absolute:绝对定位
16.2.2 position:位置
16.3 size:尺寸
16.4 transition:过渡动画
本章小结
第17章 构建UI组件库文档
17.1 VitePress
17.1.1 初始化文档
17.1.2 配置导航栏
17.1.3 配置侧边栏
17.2 解析Markdown文件
17.2.1 主题入口
17.2.2 注册全局组件
17.2.3 markdown-it-container
17.2.4 tokens容器
17.3 UI组件库解析
17.3.1 定义文档组件
17.3.2 读取容器信息
17.3.3 读取文档组件
17.3.4 渲染组件
17.3.5 代码高亮
17.3.6 展开/收起源码
17.4 撰写组件库文档
17.4.1 Markdown语法
17.4.2 Markdown扩展功能
17.4.3 Markdown表格
本章小结
第18章 UI组件库的打包和发布
18.1 了解Rollup
18.1.1 初始化Build打包目录
18.1.2 Rollup的基础配置
18.1.3 配置打包路径
18.2 UMD打包
18.2.1 输出UMD组件包
18.2.2 测试UMD组件包
18.3 ESM、CJS模块化打包
18.3.1 ESM、CJS打包输出
18.3.2 测试模块化组件包
18.4 Gulp打包scss文件
18.4.1 全量打包CSS
18.4.2 按需加载打包CSS
18.5 Gulp多任务
18.5.1 series()和parallel()
18.5.2 删除组件包
18.5.3 生成package.json文件
18.6 npm发布
18.6.1 package.json文件
18.6.2 version
18.6.3 peerDependencies
18.6.4 发布组件库
18.6.5 打包组件库文档
18.6.6 按需引入组件样式
本章小结