第一节：Vben Admin 最新 v5.0 (vben5) + Python Flask 快速入门

大崔的Linux导航

2025-07-14 22:30:09

关注

Vben Admin框架实战(Python Flask后端)

专栏收录该内容

¥9.90

¥99.00

33 篇文章

订阅专栏超级会员免费看

Vben Admin vben5 系列文章目录

🏆 专栏链接
Vben Admin 框架实战(Python后端)

文章目录

Vben Admin vben5 系列文章目录
前言
一、Vben Admin V5.0
二、快速开始
三、精简版本
总结

前言

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代码的报错，下一节我们开始准备后端代码。实现完整的登录。
在这里插入图片描述

标签

#vben admin #vue3 #前端管理框架 #前端框架 #antd design vue

VIP vben:vue3后台管理项目框架前言： Vue-Vben-Admin是一个基于Vue3.0、Vite、Ant-Design-Vue、TypeScript的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例，用于学习vue3、vite、ts等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。官方入口：... 开通可读全文·3.8w 阅读·13 点赞·85 收藏阅读全文