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分离版内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 如何利用vue3实现一个俄罗斯方块

    如何利用vue3实现一个俄罗斯方块

    俄罗斯方块这个游戏相信大家都玩过,下面这篇文章主要给大家介绍了关于如何利用vue3实现一个俄罗斯方块的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-01-01
  • vue项目依赖检查depcheck问题

    vue项目依赖检查depcheck问题

    这篇文章主要介绍了vue项目依赖检查depcheck问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07
  • Vue 短信验证码组件开发详解

    Vue 短信验证码组件开发详解

    Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的库。这篇文章主要介绍了Vue 短信验证码组件开发详解,需要的朋友可以参考下
    2017-02-02
  • Vue POST请求头'Content-Type':'application/json;',data上传过程

    Vue POST请求头'Content-Type':'application/j

    这篇文章主要介绍了Vue POST请求头'Content-Type':'application/json;',data上传过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • Vue两个通信方式与动画过度及混入使用介绍

    Vue两个通信方式与动画过度及混入使用介绍

    最近在写vue的一个项目要实现过渡的效果,虽然vue动画不是强项,库也多,但是基本的坑还是得踩扎实,下面这篇文章主要给大家介绍了关于Vue中实现过渡动画效果的相关资料,需要的朋友可以参考下
    2023-03-03
  • vue3中使用vuex和vue-router的详细步骤

    vue3中使用vuex和vue-router的详细步骤

    这篇文章主要介绍了vue3中使用vuex和vue-router的步骤,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-12-12
  • 关于vant的时间选择器使用方式

    关于vant的时间选择器使用方式

    这篇文章主要介绍了关于vant的时间选择器使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • 基于Vue3实现图片拖拽上传功能

    基于Vue3实现图片拖拽上传功能

    前端开发中,用户体验是至关重要的,图像上传是许多 web 应用中经常需要的功能之一,为了提升用户的交互体验,拖拽上传功能可以减少用户的操作步骤,本文将介绍如何使用 Vue 3实现一个简单的图片拖拽上传功能,需要的朋友可以参考下
    2024-08-08
  • vue实现打卡功能

    vue实现打卡功能

    这篇文章主要为大家详细介绍了vue实现打卡功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-08-08
  • vue路由的配置和页面切换详解

    vue路由的配置和页面切换详解

    这篇文章主要给大家介绍了关于vue路由的配置和页面切换的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-09-09

最新评论