【RuoYi-Vue】搭建RuoYi-Vue开发环境

本文介绍如何部署RuoYi-Vue前后端分离项目,包括安装依赖、配置数据库、部署前后端等步骤。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

RuoYi是一个很棒的开源SpringBoot的脚手架管理系统,记录学习过程。

我这里搭建的是RuoYi-Vue前后端分离版,

官网地址是:https://doc.ruoyi.vip/ruoyi-vue/

 

1、安装后台项目依赖

  1. 安装:JDK 8+,并设置好环境变量
  2. 安装:Intellij IDEA(或Eclipse)
  3. 安装:Maven 3.3.9+,并设置好阿里云的镜像地址:

在C:\Program Files\apache-maven-3.3.9\conf\settings.xml中,修改mirrors如下:

  <mirrors>
    <mirror>
      <id>mirrorId</id>
      <mirrorOf>repositoryId</mirrorOf>
      <name>Human Readable Name for this Mirror.</name>
      <url>http://my.repository.com/repo/path</url>
    </mirror>
    <!-- 阿里云仓库1 -->
    <mirror>
        <id>alimaven1</id>
        <name>Nexus aliyun</name>
        <url>https://maven.aliyun.com/repository/central</url>
        <mirrorOf>central</mirrorOf>
    </mirror>
    <!-- 阿里云仓库2 -->
    <mirror>
        <id>alimaven2</id>
        <name>aliyun maven</name>
        <url>http://maven.aliyun.com/nexus/content/groups/public/</url>
        <mirrorOf>central</mirrorOf>
    </mirror>
    <!-- 阿里云仓库3 -->
    <mirror>
        <id>alimaven3</id>
        <name>aliyun maven</name>
        <url>http://maven.aliyun.com/nexus/content/repositories/central/</url>
        <mirrorOf>central</mirrorOf>
    </mirror>
    <!-- 中央仓库1 -->
    <mirror>
        <id>repo1</id>
        <name>Human Readable Name for this Mirror.</name>
        <url>http://repo1.maven.org/maven2/</url>
        <mirrorOf>central</mirrorOf>
    </mirror>
    <!-- 中央仓库2 -->
    <mirror>
        <id>repo2</id>
        <name>Human Readable Name for this Mirror.</name>
        <url>http://repo2.maven.org/maven2/</url>
        <mirrorOf>central</mirrorOf>
    </mirror>
  </mirrors>

 

2、安装前端项目依赖

安装:Node.js(已自带npm)

 

3、安装数据库

安装MySQL数据库(略)

安装Redis数据库(略)

 

4、下载RuoYi-Vue源码

在Gitee上下载源码:https://gitee.com/y_project/RuoYi-Vue

然后,解压放到某个目录下(eg:D:\JavaApp\)

 

5、部署MySQL数据库

在MySQL中,执行以下脚本创建一个新的MySQL数据库:

CREATE DATABASE `ry-vue` 
CHARACTER SET 'utf8mb4' 
COLLATE 'utf8mb4_unicode_ci'
;

然后找到项目工程下的mysql初始化脚本:

RuoYi-Vue\sql\quartz.sql

RuoYi-Vue\sql\ry_20200920.sql

然后在新建的ry-vue库中,执行这2个脚本即可。

 

碰到的坑:如果是MySQL5.6,可能会报错:Index column size too large. The maximum column size is 767 bytes. (1709) (SQLExecDirectW)')

解决方法如下:

在quartz.sql文件中添加2句设置,然后在每个表都改成ROW_FORMAT=DYNAMIC,然后重新执行。

 

6、部署后台工程

    1. 用Intellij IDEA打开RuoYi-Vue项目,并刷新Maven依赖

    2.新建文件上传目录: D:/ruoyi/uploadPath

    3.修改Redis连接信息

    4.修改MySQL连接信息

    5.启动后台服务

 

控制台打印以下内容,说明后台服务启动成功:

 

7、部署前端工程

在D:\JavaApp\RuoYi-Vue>目录下执行以下命令:

cd ruoyi-ui

npm install --registry=https://registry.npm.taobao.org

npm run dev

打印出来这些信息,说明前端工程已经启动成功

 

8、打开浏览器,登陆网页

地址:http://localhost:80

默认帐号:admin/admin123

### 关于 RuoYi-Vue-Plus 与 RuoYi-Vue-Pro 的差异 #### 功能特性对比 RuoYi-Vue-Plus 是基于 Vue.js 实现的企业级中后台前端框架,集成了众多实用的功能模块和优化措施[^1]。而 RuoYi-Vue-Pro 则是在此基础上进一步增强和完善的产品版本。 - **权限管理** - 在 Plus 版本中实现了较为完善的权限控制机制,支持多种鉴权方式以及细粒度的操作授权;Pro 版本不仅继承了这些功能还增加了动态路由懒加载等功能来提升性能并简化开发流程。 - **组件库丰富程度** - Plus 提供了一套完整的业务组件集合用于快速搭建页面布局结构等需求场景下的使用;相比之下 Pro 扩展了更多高级别的UI控件如图表展示、文件上传下载插件等满足复杂应用场景的要求。 ```javascript // 权限验证逻辑示例 (假设) function checkPermission(permissionName) { const userPermissions = getUserPermissions(); // 获取当前用户的权限列表 return userPermissions.includes(permissionName); } ``` #### 技术栈更新情况 对于技术选型方面: - RuoYi-Vue-Plus 主要依赖 Element UI 组件库构建界面元素,并采用 axios 进行 HTTP 请求处理; -RuoYi-Vue-Pro 更倾向于选用最新的前端技术和工具链组合,例如可能引入 Ant Design Vue 或者其他更现代化的设计体系作为默认样式指南,在网络请求上也可能替换为更加灵活高效的解决方案像 fetch API 结合拦截器模式实现数据交互操作。 #### 性能表现考量 考虑到实际运行效率因素: - Plus 已经做了很多底层架构上的改进工作以确保良好的用户体验,比如通过 Webpack 构建配置减少打包体积加快首屏渲染速度; - Pro 可能在原有基础上继续探索前沿的技术手段如 Server-Side Rendering (服务端渲染)、Code Splitting(代码分割)等方式进一步提高整体响应时间及资源利用率。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值