ruoyi-vue-pro 开发指南 ruoyi-vue-pro 开发指南
  • 萌新必读
  • 后端手册
  • 中间件手册
  • 工作流手册
  • 大屏手册
  • 支付手册
  • 会员手册
  • 商城手册
  • ERP 手册
  • CRM 手册
  • AI 大模型手册
  • IoT 物联网手册
  • 公众号手册
  • 系统手册
  • 运维手册
  • 前端手册 Vue 2.x
  • 前端手册 Vue 3.x
  • 工作流手册
  • 大屏手册
  • 支付手册
  • 会员手册
  • 商城手册
  • ERP 手册
  • CRM 手册
  • AI 大模型手册
  • IoT 物联网手册
  • 公众号手册
  • 系统手册
视频教程
  • Vue3 + element-plus (opens new window)
  • Vue3 + vben(ant-design-vue) (opens new window)
  • Vue2 + element-ui (opens new window)
微服务版 (opens new window)
作者博客 (opens new window)
GitHub (opens new window)
  • 萌新必读
  • 后端手册
  • 中间件手册
  • 工作流手册
  • 大屏手册
  • 支付手册
  • 会员手册
  • 商城手册
  • ERP 手册
  • CRM 手册
  • AI 大模型手册
  • IoT 物联网手册
  • 公众号手册
  • 系统手册
  • 运维手册
  • 前端手册 Vue 2.x
  • 前端手册 Vue 3.x
  • 工作流手册
  • 大屏手册
  • 支付手册
  • 会员手册
  • 商城手册
  • ERP 手册
  • CRM 手册
  • AI 大模型手册
  • IoT 物联网手册
  • 公众号手册
  • 系统手册
视频教程
  • Vue3 + element-plus (opens new window)
  • Vue3 + vben(ant-design-vue) (opens new window)
  • Vue2 + element-ui (opens new window)
微服务版 (opens new window)
作者博客 (opens new window)
GitHub (opens new window)
  • 萌新必读

    • 简介
    • 交流群
    • 视频教程
    • 功能列表
    • 快速启动(后端项目)
    • 快速启动(前端项目)
      • 👍 相关视频教程
      • 1. 管理后台
        • 1.1 Vue3 + element-plus 版本
        • 1.2 Vue3 + vben5.0(ant-design-vue) 版本
        • 1.3 Vue2 + element-ui 版本
        • 1.4 Vue2 + uni-app 版本
      • 2. uni-app 商城移动端
        • 2.1 浏览器运行
        • 2.2 小程序运行
      • 666. 参与项目
    • 接口文档
    • 技术选型
    • 项目结构
    • 代码热加载
    • 一键改包
    • 迁移模块(适合新项目)
    • 删除功能(以租户为例)
    • 表结构变更(版本升级)
    • 国产信创数据库(DM 达梦、大金、OpenGauss)
    • 如何去除 Redis 缓存
    • 内网穿透
    • 面试题、简历模版、简历优化
    • 项目外包
  • 后端手册

    • 新建模块
    • 代码生成【单表】(新增功能)
    • 代码生成【主子表】
    • 代码生成(树表)
    • 功能权限
    • 数据权限
    • 用户体系
    • 三方登录
    • OAuth 2.0(SSO 单点登录)
    • SaaS 多租户【字段隔离】
    • SaaS 多租户【数据库隔离】
    • WebSocket 实时通信
    • 异常处理(错误码)
    • 参数校验、时间传参
    • 分页实现
    • VO 对象转换、数据翻译
    • 文件存储(上传下载)
    • Excel 导入导出
    • 操作日志、访问日志、异常日志
    • MyBatis 数据库
    • MyBatis 联表&分页查询
    • 多数据源(读写分离)、事务
    • Redis 缓存
    • 本地缓存
    • 异步任务
    • 分布式锁
    • 幂等性(防重复提交)
    • 请求限流(RateLimiter)
    • HTTP 接口签名(防篡改)
    • 单元测试
    • 验证码
    • 工具类 Util
    • 配置管理
    • 数据库文档
  • 中间件手册

    • 定时任务
    • 消息队列(内存)
    • 消息队列(Redis)
    • 消息队列(RocketMQ)
    • 消息队列(RabbitMQ)
    • 消息队列(Kafka)
    • 限流熔断
  • 工作流手册

    • 工作流演示
    • 功能开启
    • 工作流(达梦适配)
    • 审批接入(流程表单)
    • 审批接入(业务表单)
    • 流程设计器(BPMN)
    • 流程设计器(钉钉、飞书)
    • 选择审批人、发起人自选
    • 会签、或签、依次审批
    • 流程发起、取消、重新发起
    • 审批通过、不通过、驳回
    • 审批加签、减签
    • 审批转办、委派、抄送
    • 执行监听器、任务监听器
    • 流程表达式
    • 流程审批通知
  • 大屏手册

    • 报表设计器
    • 大屏设计器
  • 支付手册

    • 功能开启
    • 支付宝支付接入
    • 微信公众号支付接入
    • 微信小程序支付接入
    • 支付宝、微信退款接入
    • 支付宝转账接入
    • 微信转账接入
    • 钱包充值、支付、退款
    • 模拟支付、退款
  • 会员手册

    • 功能开启
    • 微信公众号登录
    • 微信小程序登录
    • 微信小程序订阅消息
    • 微信小程序码
    • 会员用户、标签、分组
    • 会员等级、积分、签到
  • 商城手册

    • 商城演示
    • 功能开启
    • 商城装修
    • 在线客服
    • 【商品】商品分类
    • 【商品】商品属性
    • 【商品】商品 SPU 与 SKU
    • 【商品】商品评价
    • 【交易】购物车
    • 【交易】交易订单
    • 【交易】售后退款
    • 【交易】快递发货
    • 【交易】门店自提
    • 【交易】分销返佣
    • 【营销】优惠劵
    • 【营销】积分商城
    • 【营销】拼团活动
    • 【营销】秒杀活动
    • 【营销】砍价活动
    • 【营销】满减送活动
    • 【营销】限时折扣
    • 【营销】内容管理
    • 【统计】会员、商品、交易统计
  • ERP手册

    • ERP 演示
    • 功能开启
    • 【产品】产品信息、分类、单位
    • 【库存】产品库存、库存明细
    • 【库存】其它入库、其它出库
    • 【库存】库存调拨、库存盘点
    • 【采购】采购订单、入库、退货
    • 【销售】销售订单、出库、退货
    • 【财务】采购付款、销售收款
  • CRM手册

    • CRM 演示
    • 功能开启
    • 【线索】线索管理
    • 【客户】客户管理、公海客户
    • 【商机】商机管理、商机状态
    • 【合同】合同管理、合同提醒
    • 【回款】回款管理、回款计划
    • 【产品】产品管理、产品分类
    • 【通用】数据权限
    • 【通用】跟进记录、待办事项
  • AI大模型手册

    • AI 大模型演示
    • 功能开启
    • AI 聊天对话
    • AI 绘画创作
    • AI 知识库
    • AI 音乐创作
    • AI 写作助手
    • AI 思维导图
    • AI 工具(function calling)
    • AI 工作流
    • Dify 工作流
    • FastGPT 工作流
    • Coze 智能体
    • 【模型接入】OpenAI
    • 【模型接入】通义千问
    • 【模型接入】DeepSeek
    • 【模型接入】字节豆包
    • 【模型接入】腾讯混元
    • 【模型接入】硅基流动
    • 【模型接入】MiniMax
    • 【模型接入】月之暗灭
    • 【模型接入】百川智能
    • 【模型接入】文心一言
    • 【模型接入】LLAMA
    • 【模型接入】智谱 GLM
    • 【模型接入】讯飞星火
    • 【模型接入】微软 OpenAI
    • 【模型接入】谷歌 Gemini
    • 【模型接入】Stable Diffusion
    • 【模型接入】Midjourney
    • 【模型接入】Suno
  • IoT物联网手册

    • 功能开启
  • 公众号手册

    • 功能开启
    • 公众号接入
    • 公众号粉丝
    • 公众号标签
    • 公众号消息
    • 自动回复
    • 公众号菜单
    • 公众号素材
    • 公众号图文
    • 公众号统计
  • 系统手册

    • 短信配置
    • 邮件配置
    • 站内信配置
    • 数据脱敏、字段权限
    • 敏感词
    • 地区 & IP 库
  • 运维手册

    • 开发环境
    • Linux 部署
    • Docker 部署
    • Jenkins 部署
    • 宝塔部署
    • HTTPS 证书
    • 服务监控
  • 前端手册 Vue 3.x

    • 开发规范
    • 菜单路由
    • Icon 图标
    • 字典数据
    • 系统组件
    • 通用方法
    • 配置读取
    • CRUD 组件
    • 国际化
    • IDE 调试
    • 代码格式化
  • 前端手册 Vue 2.x

    • 开发规范
    • 菜单路由
    • Icon 图标
    • 字典数据
    • 系统组件
    • 通用方法
    • 配置读取
  • 更新日志

    • 【v2-6-0】开发中
    • 【v2.5.0】2025-05-13
    • 【v2.4.2】2025-04-12
    • 【v2.4.1】2025-02-09
    • 【v2.4.0】2024-12-31
    • 【v2.3.0】2024-10-07
    • 【v2.2.0】2024-08-02
    • 【v2.1.0】2024-05-05
    • 【v2.0.1】2024-03-01
    • 【v2.0.0】2024-01-26
  • 开发指南
  • 萌新必读
芋道源码
2023-03-05
目录

快速启动(前端项目)

目标:将项目 ruoyi-vue-pro (opens new window) 的前端项目运行起来 🛫

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

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

交流群

友情提示:可能胖友本地没有安装 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)

# 👍 相关视频教程

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

# 1. 管理后台

项目的管理后台有 4 个版本:

  • yudao-ui-admin-vue3 (opens new window):基于 Vue3 + element-plus
  • yudao-ui-admin-vben (opens new window):基于 Vue3 + vben5.0(ant-design-vue)
  • yudao-ui-admin-vue2 (opens new window):基于 Vue2 + element-ui
  • yudao-ui-admin-uniapp (opens new window):基于 Vue2 + uni-app

# 1.1 Vue3 + element-plus 版本

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

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

② 在根目录执行如下命令,进行启动:

# 安装 pnpm,提升依赖的安装速度
npm config set registry https://registry.npmmirror.com
npm install -g pnpm
# 安装依赖
pnpm install

# 启动服务
npm run dev

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

前端界面

友情提示:Vue3 使用 Vite 构建,所以它存在如下的情况,都是正常的:

  1. 项目启动很快,浏览器打开需要等待 1 分钟左右,请保持耐心。
  2. 点击菜单,感觉会有一点卡顿,因为 Vite 采用懒加载机制。不用担心,最终部署到生产环境,就不存在这个问题了。

详细说明,可见 《为什么有人说 Vite 快,有人却说 Vite 慢?》 (opens new window) 文章。

疑问:我是前端工程师,不想启动后端项目,怎么办?

可以将上述的 npm run dev 命令,替代成 npm run dev-server 命令。

远程 演示环境的后端服务,只允许 GET 请求,不允许 POST、PUT、DELETE 等请求。

# 1.2 Vue3 + vben5.0(ant-design-vue) 版本

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

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

② 在根目录执行如下命令,进行启动:

# 安装 pnpm,提升依赖的安装速度
npm config set registry https://registry.npmmirror.com
npm install -g pnpm
# 安装依赖
pnpm install

# 启动服务
npm run dev:antd

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

前端界面

疑问:我是前端工程师,不想启动后端项目,怎么办?

可以将上述的 npm run dev 命令,替代成 npm run front 命令。

远程 演示环境的后端服务,只允许 GET 请求,不允许 POST、PUT、DELETE 等请求。

# 1.3 Vue2 + element-ui 版本

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

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

② 在根目录执行如下命令,进行启动:

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

# 启动服务
npm run local

启动前端项目

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

前端界面

疑问:我是前端工程师,不想启动后端项目,怎么办?

可以将上述的 npm run local 命令,替代成 npm run front 命令。

远程 演示环境的后端服务,只允许 GET 请求,不允许 POST、PUT、DELETE 等请求。

# 1.4 Vue2 + uni-app 版本

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

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

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

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

④ 执行如下命令,安装 npm 依赖:

# 安装 npm 依赖
npm i

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

前端界面

友情提示:登录时,滑块验证码,在内存浏览器可能存在兼容性的问题,此时使用 Chrome 浏览器,并使用“开发者工具”,设置为 iPhone 12 Pro 模式!

疑问:我是前端工程师,不想启动后端项目,怎么办?

修改 config.js 配置文件的 baseUrl 后端服务的地址为 'http://api-dashboard.yudao.iocoder.cn。如下图所示:

修改  配置文件的  后端服务的地址

远程 演示环境的后端服务,只允许 GET 请求,不允许 POST、PUT、DELETE 等请求。

# 2. uni-app 商城移动端

yudao-mall-uniapp (opens new window) 是前端 uni-app 商城移动端项目。

前置任务:

需要参考 《商城手册 —— 功能开启》 文档,将商城的后端启动。

另外,也可以阅读下 HBuilder 的官方文档 https://zh.uniapp.dcloud.io/quickstart-hx.html (opens new window) 的「运行 uni-app」小节。

① 克隆 https://github.com/yudaocode/yudao-mall-uniapp (opens new window) 项目,并 Star 关注下该项目。

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

③ 点击 HBuilder 的 [文件 -> 导入 -> 从本地项目导入...] 菜单,选择克隆的 yudao-mall-uniapp 目录

④ 执行如下命令,安装 npm 依赖:

# 安装 npm 依赖
npm i

# 【非必须】如果报错,可以在尝试,执行下如下命令
npm install --legacy-peer-deps

# 2.1 浏览器运行

点击 HBuilder 的 [运行 -> 运行到浏览器 -> Chrome] 菜单,进行运行。成功后,界面如下图所示:

前端界面

疑问:我是前端工程师,不想启动后端项目,怎么办?

搜索 http://127.0.0.1:48080 关键字,修改后端服务的地址为 'http://api-dashboard.yudao.iocoder.cn/。如下图所示:

修改  配置文件的  后端服务的地址

# 2.2 小程序运行

① 下载 微信开发者工具 (opens new window),并进行安装。

安装完成后,打开微信开发工具,并进行微信登录。

② 在 HBuilder 中,选择项目根目录的 manifest.json 文件,选择「微信小程序」配置,填写你的微信小程序 AppID。如下图所示:

配置

如果你没有微信小程序的 AppID,可以参考 https://developers.weixin.qq.com/miniprogram/dev/devtools/sandbox.html (opens new window) 申请一个测试号。

③ 点击 HBuilder 的 [运行 -> 运行到小程序模拟器 -> 微信开发者工具] 菜单,进行运行。成功后,界面如下图所示:

微信小程序界面

如果出现请求后端失败,需要把勾选上“不校验合法域名、web-view(业务域名)、tls 版本以及 https 证书”!!!

另外,如果你要体验微信小程序登录,可参考 《微信小程序登录》 文档进行配置。

= = 不要觉得麻烦,我开发的时候更麻烦、更痛苦!都是一路踩坑过来的。。。

# 666. 参与项目

如果你想参与到前端项目的开发,可以微信 wangwenbin-server 噢。

近期,重点开发 Vue3 管理后台、uniapp 商城,欢迎大家参与进来。

快速启动(后端项目)
接口文档

← 快速启动(后端项目) 接口文档→

Theme by Vdoing | Copyright © 2019-2025 芋道源码 | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式
×