Vue.js 3.x + Element Plus 前端開發實戰
趣千釐
買這商品的人也買了...
-
$250Lua 設計與實現 -
網站可靠性工程｜Google 的系統管理之道 (Site Reliability Engineering: How Google Runs Production Systems)(SRE)$780$616 -
鳥哥的 Linux 基礎學習訓練教材$480$379 -
Unity 遊戲設計育成攻略$560$476 -
$454超大流量分佈式系統架構解決方案：人人都是架構師2.0 -
使用 Laravel 8 PHP 主流框架打造 RESTful API（iT邦幫忙鐵人賽系列書）$550$429 -
重新認識 Vue.js：008天絕對看不完的 Vue.js 3 指南$600$468 -
$207Vue.js + Node.js 全棧開發實戰 -
NGINX 經典教程$719$683 -
Flutter/Dart 跨平台 App 開發實務入門, 2/e$560$442 -
APCS 完全攻略：從新手到高手，C語言解題必備！$690$538 -
APCS 完全攻略：從新手到高手，Python 解題必備！$650$507 -
Cocos Creator 3.x 游戲開發入門與實戰$654$621 -
$403Vue3.x + TypeScript 實踐指南 -
超圖解 C語言 -- 用資料結構 × 演算法突破 APCS$780$616 -
$704Vue.js 3.0 企業級管理後台開發實戰：基於 Element Plus -
Figma + Framer 打造更好的交互設計$659$626 -
HTML / CSS / JavaScript 與前端框架的完美結合：使用 Bootstrap 與 PWA 技術，新手從這開始！$690$538 -
SQL 學習手冊｜資料建立、維護與檢索, 3/e (Learning SQL: Generate, Manipulate, and Retrieve Data, 3/e)$620$490 -
Python 程式設計 -- 教學與自習最佳範本$500$395 -
Power BI 最強入門：AI視覺圖表 + 智慧決策 + 雲端分享 王者歸來 (全彩印刷) (第二版)$650$553 -
電玩遊戲進化史【圖解漫畫版】：從桌遊、RPG、任天堂到VR，回味玩心設計大躍進的魅力指南$550$495 -
AI 繪圖夢工廠 ：Midjourney、Stable Diffusion、Leonardo. ai × ChatGPT 超應用 神技$630$498 -
Vue.js 入門到實戰：頁面開發 x 元件管理 x 多語系網站開發 (適用Vue.js 3.x/2.x)$540$427 -
超上手的前端框架 - 好用 Vue.js 3 開發最主流的網站$880$695
相關主題
商品描述
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
