RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案

将 RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案,可以实现一套代码管理后台系统(PC)和移动端应用(H5/小程序/App)。以下是整合思路和关键步骤:


技术栈分工

  1. RuoYi:后端框架(Spring Boot + MyBatis)

  2. Vue CLI:PC 管理后台前端(基于 Vue 2 + Element UI)

  3. uni-app:移动端应用(一套代码编译到 H5/小程序/App)


整体架构

关键实现步骤

1. 后端统一 API 服务
  • 使用 RuoYi 提供 RESTful API

  • 配置跨域支持(PC 和移动端共享 API)

2. PC 管理后台(Vue CLI)
  • 基于 RuoYi-Vue 项目(GitHub

  • 技术栈:Vue 2 + Vuex + Vue Router + Element UI

3. PC 前端(Vue CLI)
  • 基于 RuoYi-Vue 项目(GitHub

  • 技术栈:Vue 2 + Vuex + Vue Router + Element UI+Bootstrap

4. 移动端(uni-app)
  • 安卓

  • 苹果

  • 小程序


多端适配技巧

  1. 条件编译

    复制代码
    // #ifdef H5
    console.log('仅在H5生效')
    // #endif
    
    // #ifdef MP-WEIXIN
    console.log('仅在微信小程序生效')
    // #endif
  2. UI 组件库选择

    • PC:Element UI(Vue CLI)

    • 移动端:uni-app 官方组件 或 uView UI

  3. 路由管理

    • PC:Vue Router(支持嵌套路由)

    • uni-app:内置路由(pages.json 配置)


部署方案

  1. 后端

    • RuoYi 打包为 JAR 部署到服务器

    • Nginx 配置:

      复制代码
      server {
        listen 80;
        server_name api.yourdomain.com;
        location / {
          proxy_pass http://localhost:8080;
        }
      }
  2. PC 前端

    复制代码
    npm run build
    # 部署 dist 目录到 Nginx
  3. uni-app 多端发布

    • H5:npm run build:h5

    • 微信小程序:npm run dev:mp-weixin (用微信开发者工具打开)

    • App:通过 HBuilderX 云打包


常见问题解决

  1. 跨域问题

    • 开发环境:配置 vue.config.js 代理

      复制代码
      devServer: {
        proxy: {
          '/api': {
            target: 'http://localhost:8080',
            changeOrigin: true
          }
        }
      }
    • 生产环境:Nginx 反向代理

  2. 样式冲突

    • PC 和移动端使用独立项目

    • 全局样式通过 @import 引入时添加 scoped

  3. 权限同步

    • 共用 RuoYi 的 RBAC 权限体系

    • 前端路由权限通过接口动态生

通过以上方案,可构建企业级应用:

  • PC 端:复杂数据管理(Element UI 表格/表单)

  • 移动端:轻量级操作(uni-app 跨端能力)

  • 后端:统一数据源和权限控制(RuoYi 成熟架构)

相关推荐
行云&流水7 分钟前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
老虎062722 分钟前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
烛阴1 小时前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript
CN-Dust2 小时前
[FMZ][JS]第一个回测程序--让时间轴跑起来
javascript
盛夏绽放2 小时前
Vue3 中 Excel 导出的性能优化与实战指南
vue.js·excel
全宝3 小时前
🎨前端实现文字渐变的三种方式
前端·javascript·css
yanlele3 小时前
前端面试第 75 期 - 2025.07.06 更新前端面试问题总结(12道题)
前端·javascript·面试
妮妮喔妮3 小时前
【无标题】
开发语言·前端·javascript
fie88893 小时前
浅谈几种js设计模式
开发语言·javascript·设计模式
低代码布道师4 小时前
微搭低代码实战训练营课程总结
低代码