RuoYi-Vue前后端分离后台开发框架运行详细教程

一、官网下载代码

RuoYi-Vue是一款基于SpringBoot+Vue的前后端分离极速后台开发框架。

• 若依官网：http://ruoyi.vip
• 演示地址：http://vue.ruoyi.vip
• 代码下载：https://gitee.com/y_project/RuoYi-Vue

 下载之后解压，ruoyi-ui是前端代码vue2， 建议分离出来，

vue3代码：https://github.com/yangzongzhuan/RuoYi-Vue3

用IDEA打开后端项目

二、搭建环境

1、创建mysql数据库并且导入数据

SQL文件位置

1.1、打开Navicat创建数据库并且导入

或者点击连接->MySQL...

1.2、连接名随便写，输入密码点击测试连接 查看是否成功，点击确定。

1.2、打开连接导入SQL文件

双击新建的连接

右键->新建数据库。名称一致

双击新建的数据库->右键->运行SQL文件...

选择文件

这个代表成功点击关闭 

点击表，没有刷新一下

2、修改数据库连接

编辑resources目录下的application-druid.yml

自定义数据库名称（ry-vue）和账号（root）密码 (123456)

3、配置Redis 

下载Redis 双击redis-server.exe开启服务

这个代表开启成功

三、运行java启动文件 

在RuoYiApplication.java文件中运行

检查下依赖再运行

出现这个表示后端运行成功了

可以在http://localhost:8080/ 中访问

四、前端启动

1、vue2

安装配置vue2 参考

Mac Windows安装Vue脚手架_mac下载脚手架-CSDN博客文章浏览阅读326次。Mac Windows安装Vue脚手架_mac下载脚手架https://blog.csdn.net/weixin_44523517/article/details/125826560

2、vue3

安装配置vue3+vite 参考 到第三步安装完成即可

安装配置vue3+vite_vue3 安装vite-CSDN博客文章浏览阅读7.3k次，点赞2次，收藏7次。安装配置vue3+vite_vue3 安装vitehttps://blog.csdn.net/weixin_44523517/article/details/130336959

3、运行

在前端文件运行命令
下载依赖（有国内镜像用cnpm i）：

npm i

运行：

npm run dev

出现以下代表成功了 

浏览器运行 http://localhost:80/