> 技术文档 > 若依本地搭建(前端为Vue3版本)_若依vue3版本

若依本地搭建(前端为Vue3版本)_若依vue3版本


后端搭建部分

        首先去若依官网下载最新的若依代码,或者在我的git上进行下载(没有跟随官方版本更新)
若依后端项目初始化: 用于在本地快速搭建若依的后端初始化项目

        注意:这里我们需要点击下载,下载对应的zip压缩文件并解压,而不是直接用克隆的方式到本地,因为这样可以更方便的上传到自己的gitee远程仓库。

若依本地搭建(前端为Vue3版本)_若依vue3版本

在本地解压完成后,我们首先需要对maven仓库进行下载,步骤如下:

        1.找到idea右侧的maven标签,在按照如下步骤完成maven验证,maven会自动检测没有下载的内容并下载。

若依本地搭建(前端为Vue3版本)_若依vue3版本

配置完成后的后端代码文件会变成加粗样式:
 

若依本地搭建(前端为Vue3版本)_若依vue3版本

        这里的加粗部分为后端代码,“ruoyi-ui”为前端代码内容,但是这里的前端是用vue2编写,我们不采用,后面会用vue3来运行前端。
        后端环境配置完成后,我们需要链接我们的数据库mysql,并创建一个数据库,我的名字为“ry”,并在数据库中运行若依自带的数据库构建文件,文件位于sql文件夹中。

若依本地搭建(前端为Vue3版本)_若依vue3版本

        右击我们所在的ry库,按照如下步骤找到导入sql文件的地方:

若依本地搭建(前端为Vue3版本)_若依vue3版本

        接着找到刚才说的sql文件,点击并运行,ry库中会出现若依给的一系列表。

        数据库构建完成后,我们需要对本地的数据库连接进行一些配置:
        1.对redis进行配置
若依本地搭建(前端为Vue3版本)_若依vue3版本

        在如上地方找到redis的配置代码,对地址、端口、密码进行配置,改成自己需要的,如果没有设置密码等则保持不变。
        若依本地搭建(前端为Vue3版本)_若依vue3版本

        在如上地方找到mysql的配置代码,把url部分改成自己的端口和数据库,如我的 \"....端口/数据库名?....\",并输入自己数据库的账号和密码。

完成了上述内容,则可以运行若依后端项目:
若依本地搭建(前端为Vue3版本)_若依vue3版本

运行成功的标志为下方图片:
注意:确保自己的mysql和redis服务都已经启动

若依本地搭建(前端为Vue3版本)_若依vue3版本

我们进入8080端口查看是否真的启动成功,启动成功如下:
 

若依本地搭建(前端为Vue3版本)_若依vue3版本

至此,后端的搭建已经完成。

 

 

前端vue3搭建部分:

 

        首先还是下载对应的gitee项目,这里给出我的gitee前端初始化仓库地址若依Vue3前端项目初始化: 用于快速在本地初始化Vue3的若依前端工程
        当然大家可以去找最新的地址
        下载到本地后,用vscode或WS打开前端项目,并进行依赖下载,在此之前我们需要确保我们的node版本在16及以上:
若依本地搭建(前端为Vue3版本)_若依vue3版本

接着在vscode或ws终端中,输入如下命令:
                        npm install --registry=https://registry.npmmirror.com

该过程中可以有人会出现如下情况:
                VSCode无法运行npm和yarn,显示“···因为此系统上禁止运行脚本···”

这个情况在我的博客里也有解决方法,自行查看即可。

等待依赖下载完成后执行如下命令:

                                                npm run dev

这里要注意的是,我把前端的默认端口改成了81,如果需要改成别的,在如下位置修改:
若依本地搭建(前端为Vue3版本)_若依vue3版本

运行成功后,会自动打开前端窗口,在此之前确保后端项目正常运行。
     
  如果都成功了,则会出现若依前端界面,并出现验证码功能(这是验证前后端是否联通的标志)

        若依本地搭建(前端为Vue3版本)_若依vue3版本

至此,你的若依初始化工程已经搭建完成,开始你的二次开发吧,祝贺!