快速启动（前端项目）

星球高频问题！！！

目标：将项目 ruoyi-vue-pro 的前端项目运行起来 🛫

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

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

交流群

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

Windows 安装 Node.js 指南：http://www.iocoder.cn/NodeJS/windows-install

Mac 安装 Node.js 指南：http://www.iocoder.cn/NodeJS/mac-install

👍 相关视频教程

1. 管理后台

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

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

1.1 Vue3 + element-plus 版本

yudao-ui-admin-vue3 是前端 Vue3 管理后台项目。

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

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

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

# 启动服务
npm run dev

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

前端界面

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

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

详细说明，可见《为什么有人说 Vite 快，有人却说 Vite 慢？》文章。

疑问：我是前端工程师，不想启动后端项目，怎么办？

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

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

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

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

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

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

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

# 启动服务
npm run dev:antd

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

前端界面

疑问：我是前端工程师，不想启动后端项目，怎么办？

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

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

1.3 Vue2 + element-ui 版本

yudao-ui-admin-vue2 是前端 Vue2 管理后台项目。

① 克隆 https://github.com/yudaocode/yudao-ui-admin-vue2.git 项目，并 Star 关注下该项目。

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

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

# 启动服务
npm run local

启动前端项目

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

前端界面

疑问：我是前端工程师，不想启动后端项目，怎么办？

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

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

1.4 Vue2 + uni-app 版本

yudao-ui-admin-uniapp 是前端 uni-app 管理后台项目。

① 克隆 https://github.com/yudaocode/yudao-ui-admin-uniapp.git 项目，并 Star 关注下该项目。

② 下载 HBuilder 工具，并进行安装。

③ 点击 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 是前端 uni-app 商城移动端项目。

前置任务：

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

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

① 克隆 https://github.com/yudaocode/yudao-mall-uniapp 项目，并 Star 关注下该项目。

② 下载 HBuilder 工具，并进行安装。

③ 点击 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 小程序运行

① 下载微信开发者工具，并进行安装。

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

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

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

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

微信小程序界面

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

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

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

666. 参与项目

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

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

📄 来源: https://doc.iocoder.cn/quick-start-front/🕒 爬取时间: 2025-09-26 14:57:17