vue3-element-admin 前后端本地启动联调

一、后端环境准备

1.1、下载地址

gitee 下载地址

1.2、环境要求

• JDK 17

1.3、项目启动

1. 克隆项目

   git clone https://gitee.com/youlaiorg/youlai-boot.git
   

2. 数据库初始化

   执行 youlai_boot.sql 脚本完成数据库创建、表结构和基础数据的初始化。

3. 修改配置

   application-dev.yml 修改MySQL、Redis连接为本地配置；

4. 启动项目

   执行 YoulaiBootApplication.java 的 main 方法完成后端项目启动；

   访问接口文档地址 http://localhost:8989/doc.html 验证项目启动是否成功。

能看到如下界面，说明后端启动成功：

二、前端环境准备

2.1、下载地址

gitee 下载地址

2.2、环境要求

• 开发工具：VSCode
• 运行环境：Node ≥ 18（其中 20.6.0 版本不可用）

2.3、项目启动

摘自官网

# 克隆代码
git clone https://gitee.com/youlaiorg/vue3-element-admin.git# 切换目录
cd vue3-element-admin# 安装 pnpm
npm install pnpm -g# 设置镜像源(可忽略)
pnpm config set registry https://registry.npmmirror.com# 安装依赖
pnpm install# 修改前端项目 .env.development 文件
VITE_APP_API_URL=http://127.0.0.1:8989      # 本地 开启# 启动运行
pnpm run dev

 点击验证码，能进入后端 com.youlai.boot.shared.auth.controller.AuthController#getCaptcha 断点中，就证明前后端启动成功，可以愉快地玩耍拉~~