Vue.js 3.0企業(yè)級(jí)管理后臺(tái)開發(fā)實(shí)戰(zhàn)：基于Element Plus

第1章 項(xiàng)目啟動(dòng) 1
1.1 項(xiàng)目原型 1
1.2 項(xiàng)目UI 2
1.3 項(xiàng)目開發(fā)流程 2
本章小結(jié) 4
第2章 項(xiàng)目構(gòu)建 5
2.1 Node.js 5
2.2 開發(fā)工具 6
2.3 腳手架安裝 6
2.4 項(xiàng)目創(chuàng)建 8
2.4.1 命令構(gòu)建項(xiàng)目 8
2.4.2 可視化構(gòu)建項(xiàng)目 9
2.5 項(xiàng)目倉庫 11
2.5.1 申請(qǐng)倉庫 11
2.5.2 推送項(xiàng)目 12
2.6 項(xiàng)目分支 14
2.6.1 分支命名 14
2.6.2 分支管理 16
2.6.3 分支創(chuàng)建 18
本章小結(jié) 18
第3章 初始化項(xiàng)目 19
3.1 啟動(dòng)項(xiàng)目 19
3.2 項(xiàng)目結(jié)構(gòu) 19
3.3 文件結(jié)構(gòu) 22
3.4 項(xiàng)目入口 22
3.5 路由 23
3.5.1 路由模式 23
3.5.2 路由定義 24
3.6 項(xiàng)目初始化配置 26
3.6.1 配置vue.config.js 27
3.6.2 配置Sass文件 27
3.6.3 重置瀏覽器默認(rèn)樣式 29
3.6.4 Element Plus 組件庫 29
3.6.5 依賴包指令的區(qū)別 34
3.6.6 分支合并 35
本章小結(jié) 36
第4章 Vue.js 3的變化 37
4.1 新特性 37
4.1.1 組合式API 38
4.1.2 teleport組件 39
4.1.3 片段 41
4.1.4 觸發(fā)組件選項(xiàng) 41
4.1.5 單文件組件組合式API 43
4.1.6 變量驅(qū)動(dòng)CSS 45
4.1.7 樣式穿透規(guī)則 46
4.1.8 異步組件suspense 47
4.2 生命周期 51
4.2.1 Vue.js 2生命周期 52
4.2.2 Vue.js 3生命周期 53
4.2.3 KeepAlive生命周期 56
4.3 生命周期的執(zhí)行順序 56
4.3.1 單個(gè)組件 57
4.3.2 父子組件 58
4.3.3 keep-alive組件 59
4.4 新語法 60
4.4.1 ref和reactive 61
4.4.2 toRefs 62
4.4.3 computed 63
4.4.4 watch 65
4.4.5 watchEffect 67
4.4.6 globalProperties 68
4.4.7 getCurrentInstance 69
本章小結(jié) 69
第5章 登錄及注冊(cè)業(yè)務(wù)需求 70
5.1 路由重定向 70
5.2 制作登錄頁面 71
5.2.1 scoped局部樣式 71
5.2.2 el-form 表單組件 72
5.2.3 el-row和el-col組件 74
5.2.4 el-button組件 75
5.3 Vue.js指令與頁面交互 77
5.3.1 v-for指令 77
5.3.2 v-bind指令 78
5.3.3 v-on指令 80
5.3.4 v-show和v-if指令 81
5.3.5 v-model指令 84
5.4 開發(fā)登錄頁面業(yè)務(wù)邏輯 86
5.4.1 測(cè)試用例 86
5.4.2 el-form表單校驗(yàn) 87
5.4.3 el-form自定義校驗(yàn)規(guī)則 89
5.4.4 工具庫的封裝 92
5.5 Axios攔截器 94
5.5.1 實(shí)例上下文 94
5.5.2 接口文檔 97
5.5.3 Axios應(yīng)用 99
5.5.4 Axios攔截器封裝 101
5.5.5 接口聯(lián)調(diào) 104
5.5.6 接口跨域配置 106
5.5.7 環(huán)境變量 109
5.6 開發(fā)驗(yàn)證碼業(yè)務(wù)邏輯 112
5.6.1 交互體驗(yàn) 114
5.6.2 表單提交按鈕文本交互 114
5.6.3 獲取驗(yàn)證碼提示交互 114
5.6.4 獲取驗(yàn)證碼接口聯(lián)調(diào) 116
5.6.5 驗(yàn)證碼倒計(jì)時(shí)交互 119
5.7 攔截器業(yè)務(wù)處理 122
5.7.1 響應(yīng)攔截 123
5.7.2 Promise對(duì)象 127
5.7.3 注冊(cè)接口聯(lián)調(diào) 129
5.7.4 密碼加密 134
5.7.5 登錄接口聯(lián)調(diào) 135
本章小結(jié) 136
第6章 搭建管理后臺(tái) 137
6.1 搭建框架 137
6.2 后臺(tái)首頁 139
6.3 局部組件 140
6.4 導(dǎo)航菜單 140
6.4.1 側(cè)欄菜單 141
6.4.2 el-menu菜單組件 141
6.4.3 一級(jí)菜單 144
6.4.4 子級(jí)菜單 147
6.4.5 視圖渲染 152
6.5 圖標(biāo) 153
6.5.1 Icon圖標(biāo) 153
6.5.2 Iconfont平臺(tái) 155
6.5.3 SvgIcon全局組件 156
6.5.4 組件通信Props 162
6.5.5 計(jì)算屬性Computed 166
6.5.6 導(dǎo)航菜單的優(yōu)化 170
本章小結(jié) 173
第7章 Vuex狀態(tài)管理 174
7.1 狀態(tài)管理 174
7.1.1 Module 175
7.1.2 State 176
7.1.3 Getters 177
7.1.4 Mutations 178
7.1.5 Actions 179
7.2 后臺(tái)頭部靜態(tài)制作 181
7.2.1 Sass語法 181
7.2.2 菜單按鈕 183
7.2.3 賬號(hào)信息 184
7.3 側(cè)欄菜單的展開/收起 185
7.3.1 菜單交互 186
7.3.2 菜單優(yōu)化 188
7.4 HTML5本地存儲(chǔ) 189
7.4.1 sessionStorage 190
7.4.2 localStorage 191
7.4.3 側(cè)欄菜單的刷新交互 192
本章小結(jié) 193
第8章 路由守衛(wèi) 194
8.1 登錄邏輯 194
8.2 Cookie 195
8.3 Actions異步 197
8.3.1 異步登錄 198
8.3.2 目錄別名 199
8.4 路由守衛(wèi) 200
8.4.1 to、from、next 參數(shù) 201
8.4.2 校驗(yàn)token 202
8.4.3 請(qǐng)求頭token 204
8.4.4 數(shù)據(jù)源 205
8.4.5 退出接口 206
本章小結(jié) 211
第9章 信息管理模塊 212
9.1 框架微調(diào) 212
9.2 列表頁布局 213
9.2.1 新增按鈕 214
9.2.2 搜索表單 215
9.2.3 制作列表 217
9.2.4 制作分頁 218
9.3 分類頁面 221
9.3.1 按鈕和線 221
9.3.2 樹形菜單 222
9.3.3 分類表單 227
9.4 表單頁面 228
9.4.1 路由跳轉(zhuǎn) 228
9.4.2 信息管理詳情頁 229
9.4.3 細(xì)節(jié)樣式 234
9.5 分類接口聯(lián)調(diào) 236
9.5.1 JSON對(duì)象 237
9.5.2 交互配置 238
9.5.3 添加父級(jí)分類接口聯(lián)調(diào) 247
9.5.4 分類列表接口聯(lián)調(diào) 249
9.5.5 添加子級(jí)分類接口聯(lián)調(diào) 250
9.5.6 編輯分類接口聯(lián)調(diào) 256
9.5.7 刪除分類接口聯(lián)調(diào) 259
9.6 表單數(shù)據(jù) 265
9.6.1 級(jí)聯(lián)選擇器 265
9.6.2 分類渲染 266
9.6.3 服務(wù)器上傳文件 270
9.6.4 添加信息接口聯(lián)調(diào) 272
9.7 信息列表頁 278
9.7.1 列表接口聯(lián)調(diào) 278
9.7.2 分頁數(shù)據(jù)請(qǐng)求 282
9.7.3 發(fā)布狀態(tài)接口聯(lián)調(diào) 283
9.7.4 刪除接口聯(lián)調(diào) 285
9.7.5 封裝全局方法 287
9.7.6 篩選條件搜索 293
9.8 信息編輯 297
9.8.1 路由傳參 297
9.8.2 獲取詳情接口聯(lián)調(diào) 301
9.8.3 編輯信息接口聯(lián)調(diào) 303
本章小結(jié) 305
第10章 組件化 306
10.1 封裝列表組件 306
10.1.1 組件基礎(chǔ) 306
10.1.2 渲染表頭 308
10.1.3 配置元素 309
10.1.4 請(qǐng)求列表數(shù)據(jù) 313
10.1.5 回調(diào)子組件 318
10.1.6 el-pagination組件 321
10.1.7 el-switch組件 325
10.1.8 文本格式化 331
10.1.9 el-table組件屬性 332
10.2 插槽 334
10.2.1 默認(rèn)插槽 334
10.2.2 具名插槽 335
10.2.3 作用域插槽 336
10.2.4 操作按鈕插槽 337
10.2.5 集成刪除按鈕 338
10.3 封裝表單組件 343
10.3.1 類別組件 346
10.3.2 上傳組件 351
10.3.3 富文本組件 353
10.3.4 日期時(shí)間組件 356
10.3.5 常規(guī)組件 360
10.3.6 表單按鈕 365
10.3.7 綁定字段 368
10.3.8 校驗(yàn)規(guī)則 371
10.3.9 數(shù)據(jù)初始化 377
10.3.10 提交表單 381
10.3.11 聯(lián)動(dòng)交互 383
10.3.12 等分布局 389
10.3.13 動(dòng)態(tài)組件 390
10.4 封裝搜索組件 396
10.4.1 集成列表 396
10.4.2 Provide/Inject通信 397
10.4.3 配置元素 398
10.4.4 配置參數(shù) 400
10.4.5 關(guān)鍵字組件 401
10.4.6 數(shù)據(jù)集合 405
10.4.7 配置搜索按鈕 406
10.4.8 搜索聯(lián)調(diào) 407
10.4.9 重置聯(lián)調(diào) 411
10.4.10 分頁Bug 413
10.4.11 配置按鈕 417
10.4.12 等分布局 418
本章小結(jié) 420
第11章 系統(tǒng)配置 421
11.1 菜單管理 422
11.1.1 配置菜單列表 423
11.1.2 配置菜單搜索項(xiàng) 424
11.1.3 配置菜單列表接口 425
11.1.4 配置菜單表單 426
11.1.5 添加菜單 431
11.1.6 添加菜單頁面功能 437
11.1.7 編輯菜單 440
11.1.8 添加子級(jí)菜單 448
11.1.9 菜單列表 449
11.2 角色管理 456
11.2.1 配置角色列表 456
11.2.2 配置角色搜索項(xiàng) 457
11.2.3 配置角色列表接口 458
11.2.4 Dialog對(duì)話框組件抽離 459
11.2.5 配置角色表單 462
11.2.6 添加角色 467
11.2.7 編輯角色 470
11.2.8 角色列表 476
11.3 用戶管理 477
11.3.1 配置用戶列表 477
11.3.2 配置用戶搜索項(xiàng) 478
11.3.3 配置用戶列表接口 479
11.3.4 配置用戶表單 480
11.3.5 添加用戶 490
11.3.6 編輯用戶 491
11.3.7 用戶列表 496
本章小結(jié) 500
第12章 權(quán)限管理 501
12.1 動(dòng)態(tài)路由 501
12.1.1 添加菜單 501
12.1.2 添加角色用戶 502
12.1.3 路由攔截next參數(shù) 504
12.1.4 路由權(quán)限接口 506
12.1.5 生成路由組件 507
12.1.6 addRoute動(dòng)態(tài)添加路由 511
12.1.7 動(dòng)態(tài)路由的跳轉(zhuǎn) 514
12.2 元素級(jí)權(quán)限 516
12.2.1 注冊(cè)自定義指令 517
12.2.2 應(yīng)用自定義指令 519
12.2.3 元素級(jí)權(quán)限邏輯 519
12.2.4 權(quán)限編碼整合 522
本章小結(jié) 523
第13章 項(xiàng)目部署 524
13.1 項(xiàng)目打包 524
13.1.1 項(xiàng)目環(huán)境 524
13.1.2 白屏現(xiàn)象 526
13.1.3 項(xiàng)目體積分析 526
13.1.4 CDN加速外部資源 527
13.1.5 過濾圖標(biāo)轉(zhuǎn)換 528
13.1.6 圖片壓縮 529
13.2 Nginx配置 530
13.2.1 文件部署 530
13.2.2 域名指向 531
本章小結(jié) 532