Vben Admin vben5 系列文章目錄

💻 基礎篇
? 第一節：Vben Admin 最新 v5.0 (vben5) + Python Flask 快速入門
? 第二節：Vben Admin 最新 v5.0 (vben5) + Python Flask 快速入門 - Python Flask 后端開發詳解(附源碼)
? 第三節：Vben Admin 最新 v5.0 (vben5) + Python Flask 快速入門 - 對接后端登錄接口(上)
? 第四節：Vben Admin 最新 v5.0 (vben5) + Python Flask 快速入門 - 對接后端登錄接口(下)
? 第五節：Vben Admin 最新 v5.0 (vben5) + Python Flask 快速入門 - 角色管理模塊（上）
? 第六節：Vben Admin 最新 v5.0 (vben5) + Python Flask 快速入門 - 角色管理模塊（下）
? 第七節：Vben Admin 最新 v5.0 (vben5) + Python Flask 快速入門 - 用戶管理（上）
? 第八節：Vben Admin 最新 v5.0 (vben5) + Python Flask 快速入門 - 用戶管理（下）
? 第九節：Vben Admin 最新 v5.0 (vben5) + Python Flask 快速入門 - 菜單管理（上）
? 第十節：Vben Admin 最新 v5.0 (vben5) + Python Flask 快速入門 - 菜單管理（下）
? 第十一節：Vben Admin 最新 v5.0 (vben5) + Python Flask 快速入門 - 角色菜單授權
? 第十二節：Vben Admin 最新 v5.0 (vben5) + Python Flask 快速入門 - 兩種權限控制方式（附前后端代碼）
? 第十三節：Vben Admin 最新 v5.0 (vben5) + Python Flask 快速入門 - 接口操作審計日志功能
? 第十四節：Vben Admin 最新 v5.0 (vben5) + Python Flask 快速入門 - Flask 后端 生產部署講解
? 第十五節：Vben Admin 最新 v5.0 (vben5) + Python Flask 快速入門 - vue前端 生產部署

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

前言

Vue Vben Admin(vben5)作為一個免費開源的中后臺模板，它采用了最新的 Vue 3、Vite、TypeScript 等主流技術開發，開箱即用，可用于中后臺前端開發，也適合學習參考。

目前github上的star數量是28.5K，還是非常高的，看來還是比較收到關注的一款后臺管理模板。

官網地址:https://doc.vben.pro/
預覽地址: https://www.vben.pro/#/analytics

一、Vben Admin V5.0

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

二、快速開始

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 

如下圖，可以看到前端項目已經啟動完成了！

點擊登錄，可以看到接口返回了500代碼的報錯，下一節我們開始準備后端代碼。實現完整的登錄。