idea部署RuoYi-Vue分離版的圖文詳解
現(xiàn)在大部分公司都使用到了若依框架進行二次開發(fā),相信還有很多小伙伴們對若依不是很了解,RuoYi-Vue是一款基于SpringBoot+Vue的前后端分離極速后臺開發(fā)框架, 是一個 Java EE 企業(yè)級快速開發(fā)平臺,基于經(jīng)典技術(shù)組合(Spring Boot、Spring Security、MyBatis、Jwt、Vue),內(nèi)置模塊如:部門管理、角色用戶、菜單及按鈕授權(quán)、數(shù)據(jù)權(quán)限、系統(tǒng)參數(shù)、日志管理、代碼生成等。在線定時任務(wù)配置;支持集群,支持多數(shù)據(jù)源,支持分布式事務(wù)。
想對若依進行更多了解可以傳送官方文檔: RuoYi
很多小伙伴們還不會部署這個項目到自己的本地,現(xiàn)在我就來教你將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路徑復(fù)制到URL框中,設(shè)置自定義路徑,點擊Clon就開始加載我們的項目了。
3.拉取成功就長下面這個樣子,如圖:
tips:因為本項目是前后端完全分離的,所以需要前后端都單獨部署好,才能進行訪問。
第二步,接下來我們準備我們后端啟動工作:
必要配置:
修改數(shù)據(jù)庫連接,編輯resources
目錄下的application-druid.yml
修改服務(wù)器配置,編輯resources目錄下的application.yml
這樣基礎(chǔ)配置就搞好了,接下來想要啟動我們的項目,也要保證我們本地的Redis也是在運行著的,所以就需要我們本地有下載好的Redis數(shù)據(jù)庫,我們將它運行起來。如果沒有也沒關(guān)系,請傳送至官網(wǎng)下載: Redis
安裝好以后,我們進入Redis路徑下,雙擊redis-server.exe文件,如果閃退可以使用管理員運行或者在rides目錄下打開黑窗口執(zhí)行cmd命令:redis-server.exeredis.windows.conf
Rdis啟動成功就長下面這個樣子,如圖:
Reids啟動成功,接下來我們就可以啟動我們的后端項目了,下面就是后端啟動成功的樣子,如圖:
第三步,前端部署
首先你需要在本地安裝部署nodejs,因為我們接下來都是通過npm命令來進行前端的啟動工作。
Node.js 安裝包及源碼下載地址為:Node.js
Node.js的安裝很簡單,只要一直下一步就好了,安裝好了以后我們開始配置它的環(huán)境變量,首先打開我們的環(huán)境變量配置(找不到的可以打開搜索框直接搜索環(huán)境變量即可),在系統(tǒng)變量中找到path屬性,然后將我們的Node.js安裝路徑添加到變量值中,就OK了,如圖:
下一步,我們右鍵ruoyi-ui(這個就是我們的前端項目),打開終端,如圖:
下一步,從上往下輸入命令,即可
# 安裝依賴 npm install # 強烈建議不要用直接使用 cnpm 安裝,會有各種詭異的 bug,可以通過重新指定 registry 來解決 npm 安裝速度慢的問題。 # 這里我們使用的是淘寶鏡像 npm install --registry= https://registry.npm.taobao.org # 本地開發(fā) 啟動項目 npm run dev
最后,我們的若依項目啟動成功!
前端啟動成功會自動打開瀏覽器,前端端口號默認80,如圖:
那么看到這里,我們的RuoYi-Vue就啟動成功啦!接下來就可以對若依進行更加深入的了解,并嵌入自己的項目需求。
到此這篇關(guān)于idea部署RuoYi-Vue分離版的圖文詳解的文章就介紹到這了,更多相關(guān)idea部署RuoYi-Vue分離版內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue如何使用 Slot 分發(fā)內(nèi)容實例詳解
本篇文章主要介紹了vue如何使用 Slot 分發(fā)內(nèi)容實例詳解,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-09-09解決Vue2.0 watch對象屬性變化監(jiān)聽不到的問題
今天小編就為大家分享一篇解決Vue2.0 watch對象屬性變化監(jiān)聽不到的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09Vue 使用v-model實現(xiàn)控制子組件顯隱效果
v-model 可以實現(xiàn)雙向綁定的效果,允許父組件控制子組件的顯示/隱藏,同時允許子組件自己控制自身的顯示/隱藏,本文給大介紹Vue 使用v-model實現(xiàn)控制子組件顯隱,感興趣的朋友一起看看吧2023-11-11Vue3發(fā)送post請求出現(xiàn)400?Bad?Request報錯的解決辦法
這篇文章主要給大家介紹了關(guān)于Vue3發(fā)送post請求出現(xiàn)400?Bad?Request報錯的解決辦法,文中通過實例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2023-02-02vue3整合SpringSecurity加JWT實現(xiàn)登錄認證
本文主要介紹了vue3整合SpringSecurity加JWT實現(xiàn)登錄認證,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2025-04-04Vue-drag-resize 拖拽縮放插件的使用(簡單示例)
本文通過代碼給大家介紹了Vue-drag-resize 拖拽縮放插件使用簡單示例,代碼簡單易懂,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2019-12-12VUE+node(express)實現(xiàn)前后端分離
在本篇文章里小編給大家分享的是關(guān)于VUE+node(express)前后端分離實例內(nèi)容,有需要的朋友們參考下。2019-10-10