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 成熟架构)

相关推荐
灵感__idea4 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
试图让你心动6 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
_Kayo_6 小时前
VUE2 学习笔记6 vue数据监测原理
vue.js·笔记·学习
陈琦鹏6 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数7 小时前
掌握JavaScript函数封装与作用域
前端·javascript
Carlos_sam7 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript
小毛驴8507 小时前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
你这个年龄怎么睡得着的9 小时前
Babel AST 魔法:Vite 插件如何让你的 try...catch 不再“裸奔”?
前端·javascript·vite
Dream耀9 小时前
提升React移动端开发效率:Vant组件库
前端·javascript·前端框架
NUC_Dodamce11 小时前
Cocos3x 解决同时勾选 适配屏幕宽度和 适配屏幕高度导致Widget组件失效的问题
开发语言·javascript·ecmascript