目录

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

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

一、后端环境准备

1.1、下载地址

1.2、环境要求

  • JDK 17

1.3、项目启动

  1. 克隆项目

    git clone https://gitee.com/youlaiorg/youlai-boot.git
  2. 数据库初始化

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

  3. 修改配置

    修改MySQL、Redis连接为本地配置;

  4. 启动项目

    执行 的 main 方法完成后端项目启动;

    访问接口文档地址 验证项目启动是否成功。

能看到如下界面,说明后端启动成功:

https://i-blog.csdnimg.cn/direct/9143f86e08de49d6b6eeff79c90b78da.png

二、前端环境准备

2.1、下载地址

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

https://i-blog.csdnimg.cn/direct/551952bff8a74b29adc31990f56324e2.png

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

https://i-blog.csdnimg.cn/direct/90e846be919240cfb10b4a67ff5c1bf7.png

https://i-blog.csdnimg.cn/direct/a665d08ffe4741c5be40b2146f5ac60e.png