Vue.js 3高階程式設計：UI元件庫開發實戰

第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 地方：方向 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