本書內(nèi)容

本書共 13 章，各章簡介如下。
第 1 章“項(xiàng)目啟動(dòng)” 介紹新項(xiàng)目啟動(dòng)時(shí)和項(xiàng)目有關(guān)的內(nèi)容，如項(xiàng)目原型和項(xiàng)目 UI。讀者從
中能夠清楚地了解項(xiàng)目的業(yè)務(wù)邏輯、具體要開發(fā)的功能，以及要呈現(xiàn)給用戶的界面效果和交互
效果。此外，本章還會(huì)討論項(xiàng)目開發(fā)過程的原型評(píng)審、測試用例評(píng)審、UI 評(píng)審等事項(xiàng)，這些都
是公司內(nèi)部開發(fā)項(xiàng)目的常規(guī)流程。

第 2 章“項(xiàng)目構(gòu)建” 介紹如何通過腳手架工具的命令和可視化兩種方式快速構(gòu)建項(xiàng)目，以
及團(tuán)隊(duì)協(xié)作的代碼倉庫管理和項(xiàng)目開發(fā)過程的分支管理。

第 3 章“初始化項(xiàng)目” 講解 Vue.js 項(xiàng)目的運(yùn)行入口和項(xiàng)目的文件結(jié)構(gòu)分布，并且在開發(fā)項(xiàng)
IV ∣ Vue.js 3.0 企業(yè)級(jí)管理后臺(tái)開發(fā)實(shí)戰(zhàn)：基于 Element Plus
目前，通過初始化項(xiàng)目依賴第三方 UI 包、刪除瀏覽器默認(rèn)樣式等操作提高工作開發(fā)效率，更好
地還原 UI 稿件。

第 4 章“Vue.js 3 的變化” 主要介紹 Vue.js 3 的一些新的 API 特性、Vue.js 2 和 Vue.js 3 生
命周期的區(qū)別，以及新的聲明對(duì)象語法。了解本章內(nèi)容，可以使后續(xù)的開發(fā)工作更為順暢。

第 5 章“登錄及注冊業(yè)務(wù)需求” 介紹項(xiàng)目中一個(gè)模塊的業(yè)務(wù)開發(fā)過程，通過該模塊的需求
一步步了解 Element Plus UI 組件的使用方式和 Vue.js 指令的用法，在開發(fā)過程中逐步了解前端
如何與后端對(duì)接數(shù)據(jù)、以什么方式對(duì)接，并了解 API 接口文檔的使用、API 接口聯(lián)調(diào)，以及測
試工程師對(duì)測試用例的理解等。此外，本章還會(huì)介紹如何根據(jù) UI 實(shí)現(xiàn)交互動(dòng)作及項(xiàng)目原型實(shí)現(xiàn)
業(yè)務(wù)需求。

第 6 章“搭建管理后臺(tái)” 介紹管理后臺(tái)的整體結(jié)構(gòu)及組件，通過拆解各部分組件，組合成
管理后臺(tái)，并介紹如何通過“靜態(tài)路由”實(shí)現(xiàn)菜單的渲染及菜單圖標(biāo)的開發(fā)。

第 7 章“Vuex 狀態(tài)管理” 介紹 Vuex 在 Vue.js 項(xiàng)目中的具體作用，如何通過 Vuex 實(shí)現(xiàn)項(xiàng)
目全局的數(shù)據(jù)應(yīng)用，并且通過 Vuex 實(shí)現(xiàn)管理后臺(tái)菜單的“展開/收起”效果。

第 8 章“路由守衛(wèi)” 介紹路由守衛(wèi)在管理后臺(tái)中的作用，以及在開發(fā)路由守衛(wèi)過程中遇到
的各種邏輯和問題，以及解決方式。

第 9 章“信息管理模塊” 介紹獨(dú)立模塊，結(jié)合第三方 UI 的開發(fā)過程，同時(shí)結(jié)合項(xiàng)目原型、
項(xiàng)目 UI 及更多的 API 接口聯(lián)調(diào)，以便讀者進(jìn)一步熟悉業(yè)務(wù)的整體開發(fā)過程。

第 10 章“組件化” 介紹組件二次封裝的核心和組件封裝的整體過程，以及為什么要二次封
裝組件，封裝的組件能為項(xiàng)目帶來什么。

第 11 章“系統(tǒng)配置” 介紹如何通過“角色”橋接“用戶”，實(shí)現(xiàn)用戶的權(quán)限分配。通過二
次封裝的組件，完成對(duì)“菜單管理”“角色管理”“用戶管理”3 個(gè)模塊的開發(fā)，有助于讀者體
會(huì)到傳統(tǒng)開發(fā)方式和組件開發(fā)方式的區(qū)別。

第 12 章“權(quán)限管理” 介紹如何通過讀取用戶的權(quán)限以“動(dòng)態(tài)路由”的方式渲染管理后臺(tái)的
菜單，并實(shí)現(xiàn)對(duì)“自定義指令”現(xiàn)實(shí)頁面元素級(jí)的控制。

第 13 章“項(xiàng)目部署” 介紹項(xiàng)目打包的環(huán)境變量配置和優(yōu)化，通過優(yōu)化使項(xiàng)目體積變小，提
高項(xiàng)目加載速度，并簡單介紹如何通過部署服務(wù)器來訪問開發(fā)完成的項(xiàng)目。

使用示例

本書示例以 Windows 7 及以上系統(tǒng)為基礎(chǔ)運(yùn)行，也可以在 macOS 系統(tǒng)運(yùn)行，需要安裝以下
軟件。

• Chrome 23 或更高版本、Safari 6 或更高版本、Firefox 21 或更高版本、Opear 15 或更 高版本。
• Visual Studio Code 最新版本。
• Node.js 8 或更高穩(wěn)定版本。
• Git 最新版本。
• 項(xiàng)目依賴包版本：Vue.js 3.0（^{3.2.27）、Vue-Router（}4.0.0）、Vuex（^4.0.0）、Element
  Plus（^2.0.1）。

項(xiàng)目源碼及配套文件

在學(xué)習(xí)本書示例代碼時(shí)，既可以手動(dòng)輸入代碼，也可以使用 Git 工具拉取 Gitee 倉庫源碼文
件，源碼拉取地址見鏈接 0-1。倉庫源碼拉取成功后，可一次性拉取項(xiàng)目的所有遠(yuǎn)程分支，指令
如下。

• 拉取所有分支：git branch -r | grep -v ‘->’ | while read remote; do git
  branch --track “KaTeX parse error: Expected '}', got '#' at position 8: {remote#?origin/}" "remote”; done。
• 創(chuàng)建并更新所有本地遠(yuǎn)程分支：git fetch --all。
• 同步所有遠(yuǎn)程分支代碼：git pull --all。

源碼拉取完成后，可使用 git branch --list 指令查看項(xiàng)目的所有分支，項(xiàng)目分支與本書中“代
碼清單”一一對(duì)應(yīng)。讀者可在作者的個(gè)人網(wǎng)站（見鏈接 0-2）中下載和本書相關(guān)的所有配套資料，
包括所有章節(jié)的 UI 稿件、原型圖及項(xiàng)目源碼等。

• Vue.js 3.0+Element Plus 企業(yè)級(jí)管理后臺(tái)項(xiàng)目見鏈接 0-3。
• Vue.js 3.0+Element Plus 企業(yè)級(jí)管理后臺(tái)原型見鏈接 0-4。
• 本書學(xué)習(xí)思維導(dǎo)圖見鏈接 0-5。

建議與反饋

作者本人經(jīng)常接觸管理后臺(tái)，不敢說自己的水平有多高，只是在平時(shí)工作中開發(fā)的項(xiàng)目比
較多，對(duì)管理后臺(tái)比較熟悉，同時(shí)做了各種各樣的筆記。本書開設(shè)了專門的微信群，以便讀者
共同學(xué)習(xí)、交流、分享。作者的個(gè)人網(wǎng)站還提供了很多項(xiàng)目視頻，其中包含 React 16 版本、Vue.js
3+Ant Design Vue.js、移動(dòng)端項(xiàng)目、模塊化項(xiàng)目等，供讀者學(xué)習(xí)參考。
雖然作者已盡最大努力確保本書內(nèi)容和項(xiàng)目源碼正確，但因水平有限，書中難免出現(xiàn)錯(cuò)誤。
如果你在閱讀本書時(shí)發(fā)現(xiàn)任何錯(cuò)誤或問題，可以通過作者的個(gè)人網(wǎng)站進(jìn)行聯(lián)系，同時(shí)你也可以
在項(xiàng)目倉庫（見鏈接 0-6）中提交問題。這些勘誤信息不僅有助于進(jìn)一步提高圖書質(zhì)量，也能讓
更多讀者受益。

注意事項(xiàng)

本書所有代碼清單中所聲明的“變量”及“方法”均可自定義，并非業(yè)界標(biāo)準(zhǔn)。本書的所
有代碼，無論是業(yè)務(wù)邏輯還是函數(shù)方法的封裝，均符合常規(guī)性語法，并沒有使用復(fù)雜的邏輯。
項(xiàng)目倉庫所提供的代碼僅供學(xué)習(xí)參考，請勿用于商業(yè)用途，對(duì)于因商業(yè)用途導(dǎo)致的任何問題，
本書作者概不負(fù)責(zé)。文章來源地址http://www.zghlxwxcb.cn/news/detail-402355.html

到了這里，關(guān)于Vue.js 3.0 企業(yè)級(jí)管理后臺(tái)開發(fā)實(shí)戰(zhàn) 基于Element Plus的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！