idea部署RuoYi-Vue分离版的图文详解

 更新时间:2024年06月25日 09:06:33   作者:Excellent的崽子  
RuoYi-Vue是一款基于SpringBoot+Vue的前后端分离极速后台开发框架, 本文主要介绍了idea部署RuoYi-Vue分离版的图文详解,具有一定的参考价值,感兴趣的可以了解一下

现在大部分公司都使用到了若依框架进行二次开发,相信还有很多小伙伴们对若依不是很了解,RuoYi-Vue是一款基于SpringBoot+Vue的前后端分离极速后台开发框架, 是一个 Java EE 企业级快速开发平台,基于经典技术组合(Spring Boot、Spring Security、MyBatis、Jwt、Vue),内置模块如:部门管理、角色用户、菜单及按钮授权、数据权限、系统参数、日志管理、代码生成等。在线定时任务配置;支持集群,支持多数据源,支持分布式事务。

想对若依进行更多了解可以传送官方文档: RuoYi

很多小伙伴们还不会部署这个项目到自己的本地,现在我就来教你将ruoyi-vue部署到本地,这里我们以idea进行教程。

话不多说,开干!

准备工作

  • JDK >= 1.8 (推荐1.8版本)
  • MySQL >= 5.7 (推荐5.7版本)
  • Maven >= 3.0
  • Node >= 12

第一步,拉取项目到我们的idea:

前往Gitee下载页面下载解压到工作目录,这里前提,我们需要给idea配置git,然后直接通过链接拉取项目即可。

1.本地下载git,配置到idea中。

在这里插入图片描述

配置好以后,我们就可以通过点击 File -> New -> Project from Version Controller 从远程仓库去获取我们需要的项目,如图:

在这里插入图片描述

2.将gitee路径复制到URL框中,设置自定义路径,点击Clon就开始加载我们的项目了。

在这里插入图片描述

3.拉取成功就长下面这个样子,如图:

在这里插入图片描述

tips:因为本项目是前后端完全分离的,所以需要前后端都单独部署好,才能进行访问。

第二步,接下来我们准备我们后端启动工作:

必要配置:

修改数据库连接,编辑resources目录下的application-druid.yml

在这里插入图片描述

修改服务器配置,编辑resources目录下的application.yml

在这里插入图片描述

这样基础配置就搞好了,接下来想要启动我们的项目,也要保证我们本地的Redis也是在运行着的,所以就需要我们本地有下载好的Redis数据库,我们将它运行起来。如果没有也没关系,请传送至官网下载: Redis

安装好以后,我们进入Redis路径下,双击redis-server.exe文件,如果闪退可以使用管理员运行或者在rides目录下打开黑窗口执行cmd命令:redis-server.exeredis.windows.conf

在这里插入图片描述

Rdis启动成功就长下面这个样子,如图:

在这里插入图片描述

Reids启动成功,接下来我们就可以启动我们的后端项目了,下面就是后端启动成功的样子,如图:

在这里插入图片描述

第三步,前端部署

首先你需要在本地安装部署nodejs,因为我们接下来都是通过npm命令来进行前端的启动工作。

Node.js 安装包及源码下载地址为:Node.js

Node.js的安装很简单,只要一直下一步就好了,安装好了以后我们开始配置它的环境变量,首先打开我们的环境变量配置(找不到的可以打开搜索框直接搜索环境变量即可),在系统变量中找到path属性,然后将我们的Node.js安装路径添加到变量值中,就OK了,如图:

在这里插入图片描述

下一步,我们右键ruoyi-ui(这个就是我们的前端项目),打开终端,如图:

在这里插入图片描述

在这里插入图片描述

下一步,从上往下输入命令,即可

# 安装依赖
npm install

# 强烈建议不要用直接使用 cnpm 安装,会有各种诡异的 bug,可以通过重新指定 registry 来解决 npm 安装速度慢的问题。
# 这里我们使用的是淘宝镜像
npm install --registry= https://registry.npm.taobao.org

# 本地开发 启动项目
npm run dev

最后,我们的若依项目启动成功!

前端启动成功会自动打开浏览器,前端端口号默认80,如图:

在这里插入图片描述

那么看到这里,我们的RuoYi-Vue就启动成功啦!接下来就可以对若依进行更加深入的了解,并嵌入自己的项目需求。

到此这篇关于idea部署RuoYi-Vue分离版的图文详解的文章就介绍到这了,更多相关idea部署RuoYi-Vue分离版内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 如何使用el-table+el-tree+el-select动态选择对应值

    如何使用el-table+el-tree+el-select动态选择对应值

    小编在做需求时,遇到了在el-table表格中加入多条数据,并且每条数据要通过el-select来选取相应的值,做到动态选择,下面这篇文章主要给大家介绍了关于如何使用el-table+el-tree+el-select动态选择对应值的相关资料,需要的朋友可以参考下
    2023-01-01
  • 对Vue beforeRouteEnter 的next执行时机详解

    对Vue beforeRouteEnter 的next执行时机详解

    今天小编就为大家分享一篇对Vue beforeRouteEnter 的next执行时机详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • vue.js删除列表中的一行

    vue.js删除列表中的一行

    这篇文章给大家分享了vue.js删除列表中的一行的实例操作以及代码分享,有兴趣的朋友参考下。
    2018-06-06
  • 图文详解Element-UI中自定义修改el-table样式

    图文详解Element-UI中自定义修改el-table样式

    elementUI提供的组件间距、样式都比较大,如果直接套用,在页面显示可能就会显得很大,就比如表格,表头、行宽如果不修改的话,遇到列较多的时候,会显得整个页面就不好看,下面这篇文章主要给大家介绍了关于Element-UI中自定义修改el-table样式的相关资料,需要的朋友可以参考下
    2022-08-08
  • vue 项目中使用websocket的正确姿势

    vue 项目中使用websocket的正确姿势

    这篇文章主要介绍了vue 项目中使用websocket的实例代码,通过实例代码给大家介绍了在utils下新建websocket.js文件的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-01-01
  • Vue中的异步组件函数实现代码

    Vue中的异步组件函数实现代码

    这篇文章主要介绍了Vue中的异步组件函数实现代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-07-07
  • Vue项目代码之路由拆分、Vuex模块拆分、element按需加载详解

    Vue项目代码之路由拆分、Vuex模块拆分、element按需加载详解

    这篇文章主要介绍了Vue项目代码之路由拆分、Vuex模块拆分、element按需加载,项目较大路由较多时,路由拆分是一个不错的代码优化方案,按不同业务分为多个模块,结构清晰便于统一管理,本文通过示例给大家详细讲解,需要的朋友可以参考下
    2022-11-11
  • vue3.0 CLI - 2.1 -  component 组件入门教程

    vue3.0 CLI - 2.1 - component 组件入门教程

    这篇文章主要介绍了vue3.0 CLI - 2.1 - component 组件入门教程,本文主要的关注点就是组件,本文通过实例代码相结合的形式给大家介绍的非常详细,需要的朋友可以参考下
    2018-09-09
  • vue中elementUI里面一些插件的使用

    vue中elementUI里面一些插件的使用

    Element UI是一套基于Vue的桌面端组件库,封装好了很多常用的UI组件,下面这篇文章主要给大家介绍了关于vue中elementUI里面一些插件的使用方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-06-06
  • 在vue.js中抽出公共代码的方法示例

    在vue.js中抽出公共代码的方法示例

    这篇文章主要给大家介绍了在vue.js中抽出公共代码的方法,文中给出了详细的示例代码供大家参考学习,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
    2017-06-06

最新评论