Vue.js 3.x + Element Plus 前端開發實戰

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前端開發課程的教材。

目    錄

 

第一篇  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