第1章 初識UI組件庫 1
1.1 UI組件庫是什么 1
1.2 UI組件庫的作用 1
1.3 UI組件庫的應(yīng)用 2
本章小結(jié) 2
第2章 UI組件庫的開發(fā)規(guī)范 3
2.1 命名規(guī)范 3
2.2 目錄結(jié)構(gòu) 3
2.3 組件結(jié)構(gòu) 4
2.4 樣式規(guī)范 5
2.5 組件文檔 6
2.6 版本管理 6
本章小結(jié) 7
第3章 使用Monorepo構(gòu)建組件庫 8
3.1 安裝pnpm 8
3.2 初始化UI組件庫 9
3.2.1 建立工作區(qū) 9
3.2.2 建立UI組件庫包 9
3.2.3 調(diào)用UI組件庫包 10
3.3 初始化演示庫 11
3.4 構(gòu)建組件的目錄結(jié)構(gòu) 13
3.4.1 構(gòu)建按鈕組件 13
3.4.2 按需加載并導(dǎo)出組件 13
3.4.3 全局注冊導(dǎo)出組件 14
3.5 演示庫測試組件 15
3.5.1 全局注冊 15
3.5.2 按需加載 16
本章小結(jié) 16
第4章 CSS架構(gòu)模式 17
4.1 UI組件庫元素設(shè)計(jì)規(guī)范 17
4.2 BEM命名規(guī)則 18
4.3 命名空間 19
4.4 封裝BEM命名規(guī)則 20
4.4.1 生成Block 21
4.4.2 生成Element和Modifier 22
本章小結(jié) 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：圖標(biāo)按鈕 40
5.13 loading：加載按鈕 41
5.13.1 手動(dòng)觸發(fā)加載 41
5.13.2 自動(dòng)觸發(fā)加載 43
5.14 group：按鈕組 44
5.14.1 插槽實(shí)現(xiàn)按鈕組 45
5.14.2 父級組件的屬性 46
本章小結(jié) 47
第6章 Sass制定組件庫全局變量 48
6.1 deep-merge：定義主題色 48
6.2 mix：生成主題色層次 49
6.2.1 定義@mixin方法 50
6.2.2 each、for：循環(huán)生成層次色調(diào) 51
6.3 定義中性色及其他元素 52
6.4 :root偽類選擇器 54
6.5 生成:root變量 54
6.5.1 定義前綴、塊、修改器變量 55
6.5.2 :root變量名稱的生成規(guī)則 56
6.5.3 生成層次色 57
6.5.4 獲取:root變量名稱 58
6.6 UI組件庫全局規(guī)范 59
6.7 UI組件庫應(yīng)用規(guī)范 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命名規(guī)則生成組件類名 72
6.8.1 生成塊的類名 72
6.8.2 生成元素的類名 73
6.8.3 生成修改器的類名 73
6.8.4 生成狀態(tài)的類名 74
本章小結(jié) 75
第7章 圖標(biāo)組件 76
7.1 構(gòu)建icon組件 76
7.2 渲染icon組件 77
7.3 尺寸與顏色 78
7.4 SVG圖標(biāo) 79
7.5 button組件使用SVG圖標(biāo) 80
本章小結(jié) 81
第8章 輸入框組件 82
8.1 渲染input組件 82
8.1.1 構(gòu)建組件 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：圖標(biāo) 91
8.7.1 渲染UI組件庫內(nèi)置的SVG圖標(biāo) 92
8.7.2 渲染iconfont字體圖標(biāo) 94
8.8 slot：前置、后置 96
8.8.1 渲染前置、后置組件 97
8.8.2 渲染前置、后置標(biāo)識 99
8.8.3 渲染前綴、后綴標(biāo)識 101
8.9 password：密碼 102
8.10 value：數(shù)據(jù)雙向綁定 104
8.11 clear：清除數(shù)據(jù) 105
8.12 count：統(tǒng)計(jì)字符數(shù) 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
本章小結(jié) 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 容器組件的結(jié)構(gòu) 127
9.2.2 容器外層 128
本章小結(jié) 130
第10章 多選框組件 131
10.1 渲染checkbox組件 131
10.1.1 構(gòu)建組件 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：組合式函數(shù) 140
10.4.1 定義狀態(tài)模塊 141
10.4.2 應(yīng)用狀態(tài)模塊 141
10.5 disabled：禁用 142
10.6 group：多選框組 144
10.6.1 provide、inject：通信 145
10.6.2 size：尺寸 146
10.7 model：數(shù)據(jù)綁定 147
10.7.1 數(shù)據(jù)模塊定義 147
10.7.2 數(shù)據(jù)測試 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 數(shù)據(jù)交互 157
10.11 all：全選 158
10.11.1 渲染全選組件 158
10.11.2 渲染部分選中狀態(tài) 159
10.11.3 存儲選項(xiàng)數(shù)據(jù) 161
10.11.4 全選交互 162
本章小結(jié) 163
第11章 開關(guān)組件 164
11.1 渲染switch組件 164
11.1.1 構(gòu)建組件 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：圖標(biāo) 173
11.6 centerIcon：中心圓圖標(biāo) 173
11.7 disabled：禁用 174
11.8 model：數(shù)據(jù)綁定 176
11.9 value：值 177
11.10 async：異步 177
11.11 transition：過渡動(dòng)畫 179
本章小結(jié) 180
第12章 表單組件 181
12.1 渲染form組件 181
12.1.1 構(gòu)建組件 181
12.1.2 渲染組件 182
12.1.3 文本區(qū)域 184
12.2 AsyncValidator：校驗(yàn)庫 185
12.3 rules：數(shù)據(jù)規(guī)則 186
12.4 validate：校驗(yàn)函數(shù) 187
12.5 trigger：校驗(yàn)規(guī)則類型 189
12.6 merge：合并校驗(yàn)規(guī)則 191
12.7 validate：數(shù)據(jù)校驗(yàn) 192
12.8 submit：提交校驗(yàn) 193
12.8.1 存儲formItem組件數(shù)據(jù) 194
12.8.2 調(diào)用form組件校驗(yàn) 195
12.8.3 指定字段校驗(yàn) 196
12.9 reset：重置 197
12.10 required：必填標(biāo)識 198
12.11 size：尺寸 198
本章小結(jié) 199
第13章 消息提示組件 200
13.1 createVNode函數(shù) 200
13.1.1 基本語法 200
13.1.2 屬性及事件 201
13.2 渲染message組件 202
13.2.1 構(gòu)建組件 202
13.2.2 渲染組件 204
13.3 transition：過渡動(dòng)畫 206
13.3.1 transition組件 206
13.3.2 動(dòng)畫實(shí)現(xiàn) 206
13.3.3 動(dòng)畫過程 207
13.3.4 鉤子函數(shù) 209
13.4 attribute：初始化屬性 210
13.5 z-index：層級順序 211
13.6 top：頂部偏移 212
13.6.1 存儲message組件 213
13.6.2 計(jì)算top偏移 214
13.7 autoClose：自動(dòng)關(guān)閉 216
13.8 handleClose：手動(dòng)關(guān)閉 218
13.9 allClose：全部關(guān)閉 219
13.10 theme：主題 219
13.11 background：背景顏色 220
13.12 主題方法 222
本章小結(jié) 223
第14章 模態(tài)框組件 224
14.1 mask：遮罩層 224
14.1.1 構(gòu)建組件 225
14.1.2 渲染組件 226
14.2 modal：對話框 228
14.2.1 構(gòu)建結(jié)構(gòu) 228
14.2.2 渲染組件 229
14.3 teleport：傳送 231
14.4 transition：過渡動(dòng)畫 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：事件回調(diào) 239
14.8 maskClose：遮罩關(guān)閉 240
14.9 unmount：銷毀 241
14.10 width：寬度 242
14.11 fixedScreen：固定屏 243
本章小結(jié) 245
第15章 對話框組件 246
15.1 構(gòu)建組件 246
15.2 title：標(biāo)題 248
15.3 content：內(nèi)容描述 250
本章小結(jié) 252
第16章 抽屜組件 253
16.1 構(gòu)建組件 253
16.2 placement：方向 254
16.2.1 absolute：絕對定位 255
16.2.2 position：位置 256
16.3 size：尺寸 257
16.4 transition：過渡動(dòng)畫 258
本章小結(jié) 259
第17章 構(gòu)建UI組件庫文檔 260
17.1 VitePress 260
17.1.1 初始化文檔 260
17.1.2 配置導(dǎo)航欄 263
17.1.3 配置側(cè)邊欄 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擴(kuò)展功能 281
17.4.3 Markdown表格 282
本章小結(jié) 284
第18章 UI組件庫的打包和發(fā)布 285
18.1 了解Rollup 285
18.1.1 初始化Build打包目錄 286
18.1.2 Rollup的基礎(chǔ)配置 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多任務(wù) 301
18.5.1 series()和parallel() 301
18.5.2 刪除組件包 302
18.5.3 生成package.json文件 303
18.6 npm發(fā)布 305
18.6.1 package.json文件 305
18.6.2 version 306
18.6.3 peerDependencies 307
18.6.4 發(fā)布組件庫 309
18.6.5 打包組件庫文檔 310
18.6.6 按需引入組件樣式 311
本章小結(jié) 312