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代码的报错，下一节我们开始准备后端代码。实现完整的登录。