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

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值