Vue.js 3.0 企業級管理後台開發實戰：基於 Element Plus

本書系統全面、由淺入深介紹了管理後台開發的各方面知識、經驗和技巧，包括企業內部真實的項目開發方式、項目原型、API接口文檔、API接口聯調、團隊協作開發的Git代碼管理等，並附有400餘個代碼清單，這些實例代碼與Git分支是一一對應的。除此之外，本書還結合Element Plus介紹了組件化的二次封裝、公共方法封裝等，可以使項目開發工作高效保質、事半功倍。管理後台是企業應用最多的項目之一，讀者在學習本書後可以全面地瞭解管理後台的整體結構，實現完全自主搭建管理後台。本書既適合Web前端開發者學習使用，又適合零編程經驗、有興趣從事Web前端工作，以及想深入瞭解管理後台內容的讀者閱讀，同時也可作為高等院校電腦相關專業的師生用書和培訓學校的教材。

第1章 項目啟動 1
1.1 項目原型 1
1.2 項目UI 2
1.3 項目開發流程 2
本章小結 4
第2章 項目構建 5
2.1 Node.js 5
2.2 開發工具 6
2.3 腳手架安裝 6
2.4 項目創建 8
2.4.1 命令構建項目 8
2.4.2 可視化構建項目 9
2.5 項目倉庫 11
2.5.1 申請倉庫 11
2.5.2 推送項目 12
2.6 項目分支 14
2.6.1 分支命名 14
2.6.2 分支管理 16
2.6.3 分支創建 18
本章小結 18
第3章 初始化項目 19
3.1 啟動項目 19
3.2 項目結構 19
3.3 文件結構 22
3.4 項目入口 22
3.5 路由 23
3.5.1 路由模式 23
3.5.2 路由定義 24
3.6 項目初始化配置 26
3.6.1 配置vue.config.js 27
3.6.2 配置Sass文件 27
3.6.3 重置瀏覽器默認樣式 29
3.6.4 Element Plus 組件庫 29
3.6.5 依賴包指令的區別 34
3.6.6 分支合並 35
本章小結 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 觸發組件選項 41
4.1.5 單文件組件組合式API 43
4.1.6 變量驅動CSS 45
4.1.7 樣式穿透規則 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 生命周期的執行順序 56
4.3.1 單個組件 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
本章小結 69
第5章 登錄及註冊業務需求 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 開發登錄頁面業務邏輯 86
5.4.1 測試用例 86
5.4.2 el-form表單校驗 87
5.4.3 el-form自定義校驗規則 89
5.4.4 工具庫的封裝 92
5.5 Axios攔截器 94
5.5.1 實例上下文 94
5.5.2 接口文檔 97
5.5.3 Axios應用 99
5.5.4 Axios攔截器封裝 101
5.5.5 接口聯調 104
5.5.6 接口跨域配置 106
5.5.7 環境變量 109
5.6 開發驗證碼業務邏輯 112
5.6.1 交互體驗 114
5.6.2 表單提交按鈕文本交互 114
5.6.3 獲取驗證碼提示交互 114
5.6.4 獲取驗證碼接口聯調 116
5.6.5 驗證碼倒計時交互 119
5.7 攔截器業務處理 122
5.7.1 響應攔截 123
5.7.2 Promise對象 127
5.7.3 註冊接口聯調 129
5.7.4 密碼加密 134
5.7.5 登錄接口聯調 135
本章小結 136
第6章 搭建管理後台 137
6.1 搭建框架 137
6.2 後台首頁 139
6.3 局部組件 140
6.4 導航菜單 140
6.4.1 側欄菜單 141
6.4.2 el-menu菜單組件 141
6.4.3 一級菜單 144
6.4.4 子級菜單 147
6.4.5 視圖渲染 152
6.5 圖標 153
6.5.1 Icon圖標 153
6.5.2 Iconfont平臺 155
6.5.3 SvgIcon全局組件 156
6.5.4 組件通信Props 162
6.5.5 計算屬性Computed 166
6.5.6 導航菜單的優化 170
本章小結 173
第7章 Vuex狀態管理 174
7.1 狀態管理 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 後台頭部靜態製作 181
7.2.1 Sass語法 181
7.2.2 菜單按鈕 183
7.2.3 賬號信息 184
7.3 側欄菜單的展開/收起 185
7.3.1 菜單交互 186
7.3.2 菜單優化 188
7.4 HTML5本地存儲 189
7.4.1 sessionStorage 190
7.4.2 localStorage 191
7.4.3 側欄菜單的刷新交互 192
本章小結 193
第8章 路由守衛 194
8.1 登錄邏輯 194
8.2 Cookie 195
8.3 Actions異步 197
8.3.1 異步登錄 198
8.3.2 目錄別名 199
8.4 路由守衛 200
8.4.1 to、from、next 參數 201
8.4.2 校驗token 202
8.4.3 請求頭token 204
8.4.4 數據源 205
8.4.5 退出接口 206
本章小結 211
第9章 信息管理模塊 212
9.1 框架微調 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 路由跳轉 228
9.4.2 信息管理詳情頁 229
9.4.3 細節樣式 234
9.5 分類接口聯調 236
9.5.1 JSON對象 237
9.5.2 交互配置 238
9.5.3 添加父級分類接口聯調 247
9.5.4 分類列表接口聯調 249
9.5.5 添加子級分類接口聯調 250
9.5.6 編輯分類接口聯調 256
9.5.7 刪除分類接口聯調 259
9.6 表單數據 265
9.6.1 級聯選擇器 265
9.6.2 分類渲染 266
9.6.3 服務器上傳文件 270
9.6.4 添加信息接口聯調 272
9.7 信息列表頁 278
9.7.1 列表接口聯調 278
9.7.2 分頁數據請求 282
9.7.3 發布狀態接口聯調 283
9.7.4 刪除接口聯調 285
9.7.5 封裝全局方法 287
9.7.6 篩選條件搜索 293
9.8 信息編輯 297
9.8.1 路由傳參 297
9.8.2 獲取詳情接口聯調 301
9.8.3 編輯信息接口聯調 303
本章小結 305
第10章 組件化 306
10.1 封裝列表組件 306
10.1.1 組件基礎 306
10.1.2 渲染表頭 308
10.1.3 配置元素 309
10.1.4 請求列表數據 313
10.1.5 回調子組件 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 默認插槽 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 日期時間組件 356
10.3.5 常規組件 360
10.3.6 表單按鈕 365
10.3.7 綁定字段 368
10.3.8 校驗規則 371
10.3.9 數據初始化 377
10.3.10 提交表單 381
10.3.11 聯動交互 383
10.3.12 等分佈局 389
10.3.13 動態組件 390
10.4 封裝搜索組件 396
10.4.1 集成列表 396
10.4.2 Provide/Inject通信 397
10.4.3 配置元素 398
10.4.4 配置參數 400
10.4.5 關鍵字組件 401
10.4.6 數據集合 405
10.4.7 配置搜索按鈕 406
10.4.8 搜索聯調 407
10.4.9 重置聯調 411
10.4.10 分頁Bug 413
10.4.11 配置按鈕 417
10.4.12 等分佈局 418
本章小結 420
第11章 系統配置 421
11.1 菜單管理 422
11.1.1 配置菜單列表 423
11.1.2 配置菜單搜索項 424
11.1.3 配置菜單列表接口 425
11.1.4 配置菜單表單 426
11.1.5 添加菜單 431
11.1.6 添加菜單頁面功能 437
11.1.7 編輯菜單 440
11.1.8 添加子級菜單 448
11.1.9 菜單列表 449
11.2 角色管理 456
11.2.1 配置角色列表 456
11.2.2 配置角色搜索項 457
11.2.3 配置角色列表接口 458
11.2.4 Dialog對話框組件抽離 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 配置用戶搜索項 478
11.3.3 配置用戶列表接口 479
11.3.4 配置用戶表單 480
11.3.5 添加用戶 490
11.3.6 編輯用戶 491
11.3.7 用戶列表 496
本章小結 500
第12章 權限管理 501
12.1 動態路由 501
12.1.1 添加菜單 501
12.1.2 添加角色用戶 502
12.1.3 路由攔截next參數 504
12.1.4 路由權限接口 506
12.1.5 生成路由組件 507
12.1.6 addRoute動態添加路由 511
12.1.7 動態路由的跳轉 514
12.2 元素級權限 516
12.2.1 註冊自定義指令 517
12.2.2 應用自定義指令 519
12.2.3 元素級權限邏輯 519
12.2.4 權限編碼整合 522
本章小結 523
第13章 項目部署 524
13.1 項目打包 524
13.1.1 項目環境 524
13.1.2 白屏現象 526
13.1.3 項目體積分析 526
13.1.4 CDN加速外部資源 527
13.1.5 過濾圖標轉換 528
13.1.6 圖片壓縮 529
13.2 Nginx配置 530
13.2.1 文件部署 530
13.2.2 域名指向 531
本章小結 532