【限时免费】 【保姆级超详细还免费（RuoYi-App） 新手指导】

1. 项目基础介绍与编程语言

RuoYi-App是基于UniApp开发的轻量级移动端框架，采用Vue.js作为核心编程语言，实现一套代码多端适配（APP、小程序、H5）。其设计目标是与RuoYi-Vue、RuoYi-Cloud后台系统无缝对接，提供开箱即用的移动端解决方案。

2. 项目优势

• 跨平台兼容：一次开发，同时发布到iOS、Android、微信/支付宝小程序及H5
• 生态完善：与RuoYi系列后台系统深度集成，快速构建企业级应用
• 高性能UI：内置uni-ui组件库，全端兼容且性能优化
• 模块化设计：已封装基础功能模块（登录、工作台、个人中心等）

3. 技术栈与依赖环境

技术方向	具体组件
前端框架	UniApp + Vue2
UI组件库	uni-ui
构建工具	HBuilderX
运行环境	Node.js 14+

4. 安装前准备

1. 安装HBuilderX开发工具（推荐使用最新稳定版）
2. 准备微信开发者工具（如需调试小程序）
3. 确保本机已安装Node.js运行环境

5. 详细安装步骤

步骤1：获取项目代码

• 通过代码托管平台下载项目压缩包
• 解压至本地工作目录

步骤2：导入HBuilderX

1. 打开HBuilderX → 文件 → 导入 → 从本地目录导入
2. 选择解压后的项目文件夹
3. 等待依赖自动安装完成（右下角进度条提示）

步骤3：配置项目

// 修改manifest.json中的基础配置
{
  "appid": "你的小程序ID", // 仅小程序需要
  "h5": { "router": { "mode": "history" } }
}

步骤4：运行项目

• H5模式：点击顶部菜单「运行」→「浏览器运行」
• 小程序：需配置微信开发者工具路径后运行
• APP模式：连接真机或使用模拟器调试

6. 常见问题解决

问题现象	解决方案
依赖安装失败	删除node_modules后重新npm install
小程序白屏	检查是否开启合法域名配置
接口请求404	确认后端服务地址配置正确

7. 应用案例

• 企业内部办公系统移动端
• 电商平台多端应用
• 公共服务平台小程序
• 教育行业在线学习APP