第一节：Vben Admin 最新 v5.0初体验

系列文章目录

基础篇
第一节：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
点击登录，可以看到接口报错，现在前端请求的后端有报错，下一节处理这部分逻辑