《Vue.js 3.x+Element Plus前端開發實戰》是清華大學出版社於2022年出版的書籍，作者是趣千厘
基本介紹
- 中文名：Vue.js 3.x+Element Plus前端開發實戰
- 作者：趣千厘
- 出版時間：2022年11月1日
- 出版社：清華大學出版社
- ISBN：9787302618430
- 定價：99 元
內容簡介,作者簡介,圖書目錄,
內容簡介
Element Plus是一套採用Vue.js 3.x實現的UI組件庫，它為開發者、設計師和產品經理提供了配套設計資源，可以幫助網站快速成型。本書詳解Vue.js 3.x和Element Plus開發方法，配套源碼、PPT課件。
本書分為兩篇，共14章。第一篇（第1~7章）介紹Vue.js 3和Element Plus相關的基礎知識，其中包含Vue .js 3的基礎知識、Vue.js 3生態Vue Router和Vuex的相關知識與套用、Element Plus常用組件的使用方法以及Vue.js 3和Element Plus配合使用的好處和方法，各章節通過簡單的示例，使讀者可以快速掌握相關知識；第二篇（第8~14章）講解如何構建一個功能完整的單頁面套用——許可權管理系統，為讀者掌握Element Plus打下堅實的基礎。
本書適合Vue.js 3.x+Element Plus前端開發初學者、Web套用開發人員、UI設計師和產品經理學習，也適合作為高等院校相關專業Web前端開發課程的教材。
作者簡介
趣千厘，多年Web前端開發工程師，熟練掌握Web前端主流框架及其生態，如Vue、React、Angular、Element UI、Vant UI等，並有豐富的項目實戰開發經驗，熟練框架選型及套用。目前深耕Vue框架及其生態，前端開發團隊負責人及開發主力。
圖書目錄
第一篇 Vue 3和Element Plus基礎知識
第1章 搭建Vue+Element Plus開發環境 3
1.1 簡單認識Vue 3
1.2 簡單認識Element與Element Plus 5
1.3 Vue+Element組合開發的優勢 6
1.4 搭建Vue 3.x開發環境 8
1.4.1 在不安裝Vue的情況下引入Vue 9
1.4.2 安裝 Vue 的幾種方法 10
1.4.3 Vue 框架的內容結構 12
1.4.4 第一個完整版的 Hello Vue 示例 15
1.5 在Vue中引入Element開發環境 17
1.5.1 在不安裝 Element 的情況下引入 Element 17
1.5.2 安裝Element的幾種方法 17
1.5.3 完整引入Element 18
1.5.4 按需引入 Element 18
1.6 安裝一款順手的開發工具 VScode 21
1.6.1 軟體安裝 21
1.6.2 外掛程式安裝 22
1.7 第一個完整版的Vue+Element Plus示例 23
第2章 Vue快速入門 26
2.1 雙向數據綁定 26
2.2 插值 28
2.2.1 文本插值 28
2.2.2 HTML插值 30
2.3 常用的指令 31
2.3.1 v-bind 32
2.3.2 v-on 35
2.3.3 v-if / v-else-if / v-else / v-show 36
2.3.4 v-for 36
2.3.5 v-model 38
2.3.6 v-html 38
2.3.7 v-text 38
2.4 組件 39
2.4.1 組件的註冊 39
2.4.2 組件的生命周期鉤子 40
2.4.3 組件的通信 44
第3章 Vue Router路由管理器 52
3.1 Vue Router的實現原理 52
3.1.1 Hash模式 53
3.1.2 HTML 5模式 53
3.2 Vue Router的使用方式 53
3.2.1 安裝引入 53
3.2.2 使用Vue Router 56
3.3 使用路由模組來實現頁面跳轉的幾種方式 59
3.3.1 router-link標籤跳轉 59
3.3.2 JS腳本跳轉 60
3.4 Vue Router的參數傳遞 61
3.4.1 字元串 61
3.4.2 對象 61
3.5 單頁面多路由區域的操作 63
3.6 Vue Router配置子路由 65
3.7 設定404頁面 70
第4章 Vuex全局狀態管理模式 73
4.1 不使用 Vuex 與使用 Vuex 的對比 74
4.2 安裝和使用Vuex 75
4.2.1 直接下載/CDN引入 75
4.2.2 npm/yarn安裝 75
4.2.3 Vue CLI安裝 76
4.3 state 78
4.3.1 state的定義 78
4.3.2 state的訪問 78
4.4 getters 79
4.5 mutations 80
4.5.1 定義mutations 80
4.5.2 提交mutations 81
4.6 actions 81
4.6.1 註冊actions 81
4.6.2 分發actions 82
4.7 modules 83
4.8 mapState、mapGetters、mapMutations和mapActions 85
第5章 Vue+Element實現列表和分頁 89
5.1 Table組件 89
5.1.1 Table組件的引入方式 89
5.1.2 Table組件的使用 91
5.2 Pagination 組件 109
5.2.1 Pagination組件的引入方式 109
5.2.2 Pagination組件的用法 110
5.3 實戰：數據的列表和分頁 112
第6章 Element的Form表單和Select組件 117
6.1 Form表單組件 117
6.1.1 Form組件的引入方式 117
6.1.2 Form組件的使用 121
6.2 Select組件 134
6.2.1 Select組件的組成和引入方式 135
6.2.2 Select組件的使用 136
6.3 實戰：一個註冊和登錄頁面 146
第7章 Element的Dialog組件、Message組件和MessageBox組件 158
7.1 Dialog組件 158
7.1.1 Dialog組件的引入和結構 158
7.1.2 Dialog組件的使用 160
7.2 MessageBox組件和$alert、$confirm、$prompt 163
7.2.1 MessageBox組件的引入 163
7.2.2 MessageBox的使用 164
7.3 Message組件和$message 169
7.3.1 Message組件的引入 169
7.3.2 Message組件的使用 170
7.4 實戰：一個列表的增、刪、改、查功能 172
第二篇 Vue+Element許可權管理系統項目實戰
第8章 搭建項目基礎框架 189
8.1 項目的說明和用到的技術 189
8.1.1 項目簡介 189
8.1.2 項目功能 190
8.1.3 項目使用的技術 197
8.2 搭建開發環境 197
8.2.1 安裝Git 197
8.2.2 安裝Node.js 199
8.2.3 安裝VScode 199
8.2.4 創建Vue項目 201
8.2.5 手動安裝Vue Router 202
8.2.6 手動安裝Vuex 204
8.2.7 手動安裝Element Plus 206
8.2.8 引入Element Plus圖示集 209
8.2.9 安裝CSS預處理器Sass 210
第9章 初始化頁面布局 212
9.1 原生樣式重置 212
9.2 初始化頁面布局 214
9.3 頭部組件的封裝 220
9.3.1 基礎結構 220
9.3.2 中英文切換 222
9.3.3 個人信息展示初步實現 226
9.4 登錄頁面和404頁面的實現 231
9.4.1 封裝Axios 232
9.4.2 封裝Mock.js 242
9.4.3 登錄狀態管理 249
9.4.4 通用頭部遺留功能完善 252
9.4.5 404頁面 257
9.5 左側導航欄封裝 258
9.5.1 靜態選單 258
9.5.2 動態選單 264
第10章 實現各模組分頁表格展示 275
10.1 通用分頁表格組件的封裝 275
10.2 各模組入口頁面的實現 285
10.2.1 審計管理 285
10.2.2 系統管理 290
10.2.3 套用管理 298
第11章 添加和編輯功能的實現 308
11.1 系統管理 308
11.1.1 公告管理 308
11.1.2 用戶管理 315
11.1.3 提取公共操作方法 320
11.2 套用管理 328
11.2.1 角色管理 328
11.2.2 機構管理 332
11.2.3 用戶管理 335
11.2.4 資源管理 342
第12章 刪除和其他操作的實現 348
12.1 刪除操作 348
12.2 綁定資源操作 350
第13章 個人中心功能的實現 353
13.1 個人中心布局 353
13.2 基本資料 356
13.3 修改密碼 358
13.4 系統訊息 361
第14章 GitHub部署項目 370
14.1 認識 GitHub 370
14.2 部署項目 378
14.2.1 GitHub Pages部署 379
14.2.2 GitHub Actions部署 382
