若依RUOYI-VUE3框架学习1-环境搭建

1,854 阅读1分钟

打算学习一下搭建前后端分离的VUE3的RUOYI框架

下载RUOYI# v3.8.7框架#

gitee.com/y_project/R…

RUOYI-VUE3 # v3.8.7

github.com/yangzongzhu…

启动Ruoyi后端服务

IDEA里面,源码如下组织,红框地方就是把RUOYI-VUE3 放到RUOYI框架的主目录下

image.png 搭建mysql数据库 , 建立test用户,导入如下的sql代码

image.png 数据库使用dbeaver 进行查看

image.png

修改RUOYI框架主目录下,ruoyi-admin\src\main\resource\application 目录下面数据库配置文件

image.png

Ruoyi主体框架配置完成,下面启动后台服务,执行ruoyi-admin\src\main\java\com.ruoyi\RuoYiApplication.java , 启动Spring-boot

image.png 出现下面符号表示启动成功

image.png

启动ruoyi-vue3 前端工程

点击Idea 终端,起一个cmd环境

image.png cd到 RuoYi-Vue3-master 主目录下,执行node -v命令查看当前node环境

image.png

ruoyivue3 要求node>18 , 我这里直接安装的最新版22, 安装nodejs 的虚拟环境工具 nvm ,windows下面比较简单,下载安装直接下一步就行,安装后,在这个目录安装nodejs 的最新版,有了nvm虚拟环境,如果需要其他的版本就能自由切换了 执行命令 nvm install latest 安装后,执行 npm install 命令 把package.json 中需要的包进行安装 没有错误后,执行 npm run dev 启动前端,框架会自动打开页面,默认密码 admin admin

image.png