目标：使用 IDEA 工具，将后端项目 yudao-cloud (opens new window) 运行起来，并按需启动前端项目。

整个过程非常简单，预计 30 分钟就可以完成，取决于大家的网速。

↓↓↓ 技术交流群，一起苦练技术基本功，每日精进 30 公里！↓↓↓

# 👍 相关视频教程

• 从零开始 02：在 Windows 环境下，如何运行前后端项目？ (opens new window)
• 从零开始 03：在 MacOS 环境下，如何运行前后端项目？ (opens new window)

# 1. 克隆代码

使用 IDEA (opens new window) 克隆 https://github.com/YunaiV/yudao-cloud (opens new window) 仓库的最新代码，并给该仓库一个 Star (opens new window)。

友情提示：IDEA 请使用至少 2020 版本，不知道怎么激活的可以看看 《IDEA 破解新招 - 无限重置30天试用期（适用于 2018、2019、2020、2021 所有版本） 》 (opens new window) 文章！

注意：不支持使用 Eclipse 启动项目，因为它没有支持 Lombok 和 Mapstruct 的插件。

克隆完成后，耐心等待 Maven 下载完相关的依赖。

友情提示：项目的每个模块的作用，可见 《开发指南 —— 项目结构》 文档。

使用的 Spring Cloud 版本较新，所以需要下载一段时间。趁着这个时间，胖友可以给项目添加一个 Star (opens new window)，支持下艿艿。

# 2. Apifox 接口工具

点击 Apifox (opens new window) 首页，下载对应的 Apifox 桌面版。如下图所示：

解压后，双击进行安装即可。黑色界面，非常酷炫。

# 3. 基础设施（必选)

本小节的基础设施【必须】安装，否则项目无法启动。

# 3.1 初始化 MySQL

项目使用 MySQL 存储数据，所以需要启动一个 MySQL 服务，建议使用 5.7 版本。

① 创建一个名字为 ruoyi-vue-pro 数据库，执行对应数据库类型的 sql (opens new window) 目录下的 SQL 文件，进行初始化。

② 默认配置下，MySQL 需要启动在 3306 端口，并且账号是 root，密码是 123456。如果不一致，需要修改 application-local.yaml 配置文件。

# 3.2 初始化 Redis

项目使用 Redis 缓存数据，所以需要启动一个 Redis 服务。

一定要使用 5.0 以上的版本，项目使用 Redis Stream 作为消息队列。

不会安装的胖友，可以选择阅读下文，良心的艿艿。

• Windows 安装 Redis 指南：http://www.iocoder.cn/Redis/windows-install (opens new window)
• Mac 安装 Redis 指南：http://www.iocoder.cn/Redis/mac-install (opens new window)

默认配置下，Redis 启动在 6379 端口，不设置账号密码。如果不一致，需要修改 application-local.yaml 配置文件。

# 3.3 初始化 Nacos

项目使用 Nacos 作为注册中心和配置中心，参考 《芋道 Nacos 极简入门》 (opens new window) 文章，进行安装，只需要看该文的 「2. 单机部署（最简模式）」 即可。

安装完成之后，需要创建 dev 命名空间，如下图所示：

Nacos 拓展学习资料：

• 《芋道 Spring Cloud Alibaba 配置中心 Nacos 入门》 (opens new window) 对应 labx-05-spring-cloud-alibaba-nacos-config (opens new window)
• 《芋道 Spring Cloud Alibaba 注册中心 Nacos 入门》 (opens new window) 对应 labx-01-spring-cloud-alibaba-nacos-discovery (opens new window)

# 4. 基础设施（可选）

本小节的基础设施【可选】安装，不影响项目的启动，可在项目启动后再安装。

# 4.1 RocketMQ

项目使用 RocketMQ 作为消息中心和事件总线，参考 《芋道 RocketMQ 极简入门》 (opens new window) 文章，进行安装，只需要看该文的 「2. 单机部署」 即可。

Seata 拓展学习资料：

• 《芋道 Spring Cloud Alibaba 消息队列 RocketMQ 入门》 (opens new window) 对应 labx-06-spring-cloud-stream-rocketmq (opens new window)
• 《芋道 Spring Cloud Alibaba 事件总线 Bus RocketMQ 入门》 (opens new window) 对应 labx-06-spring-cloud-stream-rocketmq (opens new window)
• 《性能测试 —— RocketMQ 基准测试》 (opens new window)

# 4.2 XXL-Job

① 项目使用 XXL-Job 作为定时任务，参考 《芋道 XXL-Job 极简入门》 (opens new window) 文章，进行安装，只需要看该文的 「4. 搭建调度中心」 即可。

注意，需要修改 application.yaml 配置文件，修改 server.port 为 9090。

② 默认配置下，本地 local 环境的定时任务是关闭的，避免控制台一直报错报错。如果要开启，请参考 《微服务手册 —— 定时任务》 文档。

# 4.3 Seata

TODO 暂时忽略，后续版本引入

Seata 拓展学习资料：

• 《芋道 Spring Cloud Alibaba 分布式事务 Seata 入门 》 (opens new window) 对应 对应 labx-17 (opens new window)

# 4.4 Sentinel

TODO 暂时忽略，后续版本引入

Sentinel 拓展学习资料：

• 《芋道 Spring Cloud Alibaba 服务容错 Sentinel 入门 》 (opens new window) 对应 labx-04-spring-cloud-alibaba-sentinel (opens new window)

# 4.5 Elasticsearch

TODO 暂时忽略，后续版本引入

Elasticsearch 拓展学习资料：

• 《芋道 Spring Boot Elasticsearch 入门》 (opens new window)
• 《芋道 ELK(Elasticsearch + Logstash + Kibana) 极简入门》 (opens new window)

# 5. 启动后端项目

# 5.1 编译项目

使用 IDEA 打开 Terminal 终端，在根目录下直接执行 mvn clean install package '-Dmaven.test.skip=true' 命令，将项目进行初始化的打包，预计需要 1 分钟左右。成功后，控制台日志如下：

1
2
3
4
5
6

[INFO] BUILD SUCCESS
[INFO] ------------------------------------------------------------------------
[INFO] Total time: 01:12 min
[INFO] Finished at: 2022-02-12T09:52:38+08:00
[INFO] Final Memory: 250M/2256M
[INFO] ------------------------------------------------------------------------

# 5.2 启动 gateway 服务

执行 GatewayServerApplication (opens new window) 类，进行启动。

启动完成后，使用浏览器访问 http://127.0.0.1:48080 (opens new window) 地址，返回如下 JSON 字符串，说明成功。

友情提示：注意，默认配置下，网关启动在 48080 端口。

1

{"code":404,"data":null,"msg":null}

如果报 “Command line is too long” 错误，参考 《Intellij IDEA 运行时报 Command line is too long 解决方法 》 (opens new window) 文章解决，或者直接点击 YudaoServerApplication 蓝字部分！

# 5.3 启动 system 服务

执行 SystemServerApplication (opens new window) 类，进行启动。

启动完成后，使用浏览器访问 http://127.0.0.1:48081/admin-api/system/ (opens new window) 和 http://127.0.0.1:48080/admin-api/system/ (opens new window) 地址，都返回如下 JSON 字符串，说明成功。

友情提示：注意，默认配置下，yudao-module-system 服务启动在 48081 端口。

1

{"code":401,"data":null,"msg":"账号未登录"}

# 5.3 启动 infra 服务

执行 InfraServerApplication ( opens new window) 类，进行启动。

启动完成后，使用浏览器访问 http://127.0.0.1:48082/admin-api/infra/ ( opens new window) 和 http://127.0.0.1:48080/admin-api/infra/ ( opens new window) 地址，都返回如下 JSON 字符串，说明成功。

友情提示：注意，默认配置下，yudao-module-infra 服务启动在 48082 端口。

1

{"code":401,"data":null,"msg":"账号未登录"}

# 5.4 启动 bpm 服务

参见 《工作流手册 —— 工作流》 文档。

# 5.5 启动 report 服务

参见 《大屏手册 —— 报表设计器》 文档。

# 5.6 启动 pay 服务

适配中，预计 3 - 4 月份完成。

# 5.7 启动 mall 服务

适配中，预计 6 月份完成。

# 6. 启动前端项目【简易】

在 yudao-ui-static ( opens new window) 项目中，提前编译好了前端项目的静态资源，可以直接体验和使用。操作步骤如下：

① 克隆 https://gitee.com/yudaocode/yudao-ui-static ( opens new window) 项目，运行 UiConfiguration 类，进行启动。

② 访问 http://127.0.0.1:2048/admin-ui-vue2/ ( opens new window) 地址，可以看到 Vue2 管理后台。

② 访问 http://127.0.0.1:2048/admin-ui-vue3/ ( opens new window) 地址，可以看到 Vue3 + element-plus 管理后台。

③ 访问 http://127.0.0.1:2048/admin-ui-vben/ ( opens new window) 地址，可以看到 Vue3 + vben(ant-design-vue) 管理后台。

# 7. 启动前端项目【完整】

项目提供了多套前端项目，可以按需启动哈。

友情提示：可能胖友本地没有安装 Node.js 的环境，导致报错。可以参考如下文档安装：

• Windows 安装 Node.js 指南：http://www.iocoder.cn/NodeJS/windows-install ( opens new window)
• Mac 安装 Node.js 指南：http://www.iocoder.cn/NodeJS/mac-install ( opens new window)

# 7.1 启动 Vue3 + element-plus 管理后台

yudao-ui-admin-vue3 ( opens new window) 是前端 Vue3 + element-plus 管理后台项目。

① 克隆 https://github.com/yudaocode/yudao-ui-admin-vue3.git ( opens new window) 项目，并 Star 关注下该项目。

② 在根目录执行如下命令，进行启动：

1
2
3
4
5
6
7
8

# 安装 pnpm，提升依赖的安装速度
npm config set registry https://registry.npmjs.org
npm install -g pnpm
# 安装依赖
pnpm install

# 启动服务
npm run dev

③ 启动完成后，浏览器会自动打开 http://localhost:80 (opens new window) 地址，可以看到前端界面。

# 7.2 启动 Vue3 + vben(ant-design-vue) 管理后台

yudao-ui-admin-vue3 (opens new window) 是前端 Vue3 + vben(ant-design-vue) 管理后台项目。

① 克隆 https://github.com/yudaocode/yudao-ui-admin-vben.git (opens new window) 项目，并 Star 关注下该项目。

② 在根目录执行如下命令，进行启动：

1
2
3
4
5
6
7
8

# 安装 pnpm，提升依赖的安装速度
npm config set registry https://registry.npmjs.org
npm install -g pnpm
# 安装依赖
pnpm install

# 启动服务
npm run dev

③ 启动完成后，浏览器会自动打开 http://localhost:80 (opens new window) 地址，可以看到前端界面。

# 7.3 启动 Vue2 管理后台

yudao-ui-admin (opens new window) 是前端 Vue2 管理后台项目。

① 在 yudao-ui-admin 目录下，执行如下命令，进行启动：

1
2
3
4
5
6
7
8
9
10

# 进入项目目录
cd yudao-ui-admin

# 安装 Yarn，提升依赖的安装速度
npm install --global yarn
# 安装依赖
yarn install

# 启动服务
npm run local

② 启动完成后，浏览器会自动打开 http://localhost:1024 (opens new window) 地址，可以看到前端界面。

# 7.4 启动 uni-app 管理后台

yudao-ui-admin-uniapp (opens new window) 是前端 uni-app 管理后台项目。

① 下载 HBuilder (opens new window) 工具，并进行安装。

② 点击 HBuilder 的 [文件 -> 导入 -> 从本地项目导入...] 菜单，选择项目的 yudao-ui-admin-uniapp 目录

③ 执行如下命令，安装 npm 依赖：

1
2
3
4
5

# 进入项目目录
cd yudao-ui-admin-uniapp

# 安装 npm 依赖
npm i

④ 点击 HBuilder 的 [运行 -> 运行到内置浏览器] 菜单，使用 H5 的方式运行。成功后，界面如下图所示：

# 7.5 启动 uni-app 用户前台

yudao-ui-app (opens new window) 是前端 uni-app 用户前台项目。

① 下载 HBuilder (opens new window) 工具，并进行安装。

② 点击 HBuilder 的 [文件 -> 导入 -> 从本地项目导入...] 菜单，选择项目的 yudao-ui-app 目录

③ 点击 HBuilder 的 [运行 -> 运行到内置浏览器] 菜单，使用 H5 的方式运行。成功后，界面如下图所示：

# 666. 彩蛋

至此，我们已经完成了项目 ruoyi-vue-pro (opens new window) 的启动。

胖友可以根据自己的兴趣，阅读相关源码。如果你想更快速的学习，可以看看 《视频教程 》 教程哟。

后面，艿艿会花大量的时间，继续优化这个项目。同时，输出与项目匹配的技术博客，方便胖友更好的学习与理解。

还是那句话，😆 为开源继绝学，我辈义不容辞！

嘿嘿嘿，记得一定要给 https://github.com/YunaiV/yudao-cloud (opens new window) 一个 star，这对艿艿真的很重要。