系列文章目錄

基礎篇
第一節：Vben Admin介紹和初次運行
第二節：Vben Admin 登錄邏輯梳理和對接后端準備
第三節：Vben Admin登錄對接后端login接口
第四節：Vben Admin登錄對接后端getUserInfo接口
第五節：Vben Admin權限-前端控制方式
第六節：Vben Admin權限-后端控制方式
第七節：Vben Admin權限-后端獲取路由和菜單

實戰篇
第八節：Vben Admin登錄頁面自定義
第九節：Vben Admin實戰-系統管理之角色管理實現-上
第十節：Vben Admin實戰-系統管理之角色管理實現(分頁查詢，修改)-中
第十一節：Vben Admin實戰-系統管理之角色管理實現(刪除，狀態修改)-下
第十二節：Vben Admin實戰-系統管理之用戶管理
第十三節：Vben Admin實戰-系統管理之菜單管理

專欄鏈接
Vben Admin框架實戰(Python后端)

---

---

前言

---

一、Vben Admin V5.0

Vben Admin 框架新出的版本V5.5.4，而之前的Vben Admin 2.x 目前已存檔，僅進行重大問題修復。
之前在2.x版本曾經簡單完成了一版專欄文章，當時也是收獲了一些好評和建議。本次決定在v5 版本基礎上再完成一次前后端的搭建。希望大家繼續多多支持。

二、快速開始

1.前置準備

環境要求在啟動項目前，你需要確保你的環境滿足以下要求：Node.js 20.15.0 及以上版本，推薦使用 fnm 、 nvm 或者直接使用pnpm 進行版本管理。
Git 任意版本。
驗證你的環境是否滿足以上要求，你可以通過以下命令查看版本：# 出現相應 node LTS版本即可
node -v
# 出現相應 git 版本即可
git -v

2.獲取源碼

注意存放代碼的目錄及所有父級目錄不能存在中文、韓文、日文以及空格，否則安裝依賴后啟動會出錯。

# clone 代碼
git clone https://github.com/vbenjs/vue-vben-admin.git

確認版本，我們本次使用的是5.5.4 版本

3. 安裝依賴

# 進入項目目錄
cd vue-vben-admin# 使用項目指定的pnpm版本進行依賴安裝
corepack enable# 安裝依賴
pnpm install

項目只支持使用 pnpm 進行依賴安裝，默認會使用 corepack 來安裝指定版本的 pnpm。:
如果你的網絡環境無法訪問npm源，你可以設置系統的環境變量COREPACK_NPM_REGISTRY=https://registry.npmmirror.com，然后再執行pnpm install。
如果你不想使用corepack，你需要禁用corepack，然后使用你自己的pnpm進行安裝。

4. 運行項目

# 啟動項目
pnpm dev

此時，你會看到類似如下的輸出，選擇你需要運行的項目：

│
◆  Select the app you need to run [dev]:
│  ○ @vben/web-antd
│  ○ @vben/web-ele
│  ○ @vben/web-naive
│  ○ @vben/docs
│  ● @vben/playground
└

三、精簡版本

從 5.0 版本開始，Vben Admin不再提供精簡的倉庫或者分支。我們的目標是提供一個更加一致的開發體驗，同時減少維護成本。在這里，我們將如何介紹自己的項目，如何去精簡以及移除不需要的功能

應用精簡

刪除目錄
apps/web-ele
apps/web-naive

演示代碼精簡

直接刪除的playground文件夾

文檔精簡

如果你不需要文檔，你可以直接刪除docs文件夾。

Mock 服務精簡

如果你不需要Mock服務，你可以直接刪除apps/backend-mock文件夾。同時在你的應用下.env.development文件中刪除VITE_NITRO_MOCK變量。

# 是否開啟 Nitro Mock服務，true 為開啟，false 為關閉
VITE_NITRO_MOCK=false

其他刪除

如果你想更進一步精簡，你可以刪除參考以下文件或者文件夾的作用，判斷自己是否需要，不需要刪除即可：

.changeset 文件夾用于管理版本變更
.github 文件夾用于存放 GitHub 的配置文件
.vscode 文件夾用于存放 VSCode 的配置文件，如果你使用其他編輯器，可以刪除
./scripts/deploy 文件夾用于存放部署腳本，如果你不需要docker部署，可以刪除

總結

項目精簡后，再次啟動項目，執行 pnpm run dev
點擊登錄，可以看到接口報錯，現在前端請求的后端有報錯，下一節處理這部分邏輯