開發(fā)環(huán)境
IDEAV2018.5
npmv6.4.x
vue-cliv2.9.x
創(chuàng)建項(xiàng)目
IDEA > Create New Project > Gradle
此處的 Frameworks全部取消勾選,接著就一直 Next，提示填寫的地方填寫，不需要填寫的就用默認(rèn)配置就 ok。
項(xiàng)目創(chuàng)建成功，項(xiàng)目結(jié)構(gòu)應(yīng)該是這樣的。
創(chuàng)建后臺模塊
▼ 項(xiàng)目 > 右鍵 > New > Module
▼ Spring Initializr
▼ 這一步按照正常項(xiàng)目信息填寫。
注意：Type 屬性需要選擇 Gradle Config
▼ 按照自己需要的依賴進(jìn)行選取
▼ 下一步默認(rèn)，然后 Finish。之后需要等待 Gradle 進(jìn)行模塊的初始化，如果是首次創(chuàng)建 SpringBoot 項(xiàng)目，此處初始化可能需要比較長的時間，需要耐心和良好的網(wǎng)絡(luò)環(huán)境。
成功后是如上所示結(jié)構(gòu)，之后我們需要手動完善一些結(jié)構(gòu)和配置
配置后臺模塊
一、配置模塊依賴
在根項(xiàng)目的settings.gradle文件中增加include 'server'
二、完善 server 項(xiàng)目工程結(jié)構(gòu)
server 目錄默認(rèn)創(chuàng)建出來只有一個build.gradle文件，我們需要手工完善項(xiàng)目結(jié)構(gòu)
如上圖所示，可以看到，我們其實(shí)建立出來的就是一個標(biāo)準(zhǔn)的 java 工程結(jié)構(gòu)。
src 目錄下游 main 目錄，正常情況此處src 下還需要有 test 目錄，這里演示就略過了。
main 下面創(chuàng)建 java 和 resources 。
java 下面創(chuàng)建對應(yīng)的包結(jié)構(gòu)和 SpringBoot 的啟動類，代碼如圖的右邊區(qū)域，非初次接觸 SpringBoot 對這個代碼應(yīng)該不陌生。
resources 目錄下暫時就只創(chuàng)建配置文件application.yml。
三、配置后臺數(shù)據(jù)源
加入了數(shù)據(jù)源的 SpringBoot 項(xiàng)目需要在application.yml中配置數(shù)據(jù)源信息，否則項(xiàng)目會啟動失敗。
# 配置項(xiàng)目的數(shù)據(jù)源spring:datasource:driver-class-name:com.mysql.jdbc.Driverurl:jdbc:mysql://localhost:3306/test?characterEncoding=UTF-8&useUnicode=true&useSSL=falsepassword:root? ? username:root
到此后臺模塊創(chuàng)建配置完成
創(chuàng)建前端模塊
▼ 項(xiàng)目 > 右鍵 > New > Module
前端模塊這里選擇 Gradle，然后注意右邊 Frameworks 這里需要取消 java 的勾選
這一步只需要填寫一下 ArtifactId，名字可以自己定義，不一定要照搬我的命名習(xí)慣。然后一直下一步 直到 Finish。
模塊完成初始化后，結(jié)構(gòu)如上圖所示，多出一個 client 目錄，也是只有一個 build.gradle 文件。由于這個我們之間選擇的新增 Gradle 的模塊，所以在 settings.gradle 文件中，工具自動幫我們把 include 補(bǔ)全了。
▼▼▼接下來就是比較關(guān)鍵的步驟了,敲黑板.....▼▼▼
我們需要將 client 模塊初始化為 vue 項(xiàng)目。這里我們用到的 vue 提供的vue-cli模塊。
關(guān)于 vue-cli 的安裝請參考百度。
初始化 vue 項(xiàng)目
打開 idea 底部的 Terminal
在控制臺輸入：
vue init webpack client
注意：此處的項(xiàng)目名稱一定需要和你的創(chuàng)建前端模塊的名稱一致。例如我的前端模塊目錄是 client，我這里就是vue init webpackclient。然后其他的配置，的配置選項(xiàng)就是正常的 vue 初始化過程了。我這里選擇的構(gòu)建工具是 Yarn，不是 npm。此處的選擇不影響后面的構(gòu)建。
這一步完成后，基本的前端模塊算初始化完成。接下來，我們需要將前端模塊整合道 Gradle 中便于統(tǒng)一編譯和管理。
配置前端模塊
一、clinet/build.gradle配置
將clinet/build.gradle內(nèi)容修改為如下：
plugins{id"com.moowork.node"version"1.2.0"}node{version='8.7.0'yarnVersion='1.3.2'download=true}taskbootRun(dependsOn:'start'){group='application'description='Run the client app (for use with gradle bootRun -parallel）'}taskstart(type:YarnTask,dependsOn:'yarn'){group='application'description='Run the client app'args=['run','start']}taskbuild(type:YarnTask,dependsOn:'yarn'){group='build'description='Build the client bundle'args=['run','build']}
此處主要是為Gradle 配置了幾個任務(wù)。大致意思就是用 Gradle 來代理執(zhí)行前端的編譯命令。
二、build.gradle配置
這里需要配置是根項(xiàng)目下的build.gradle
在build.gradle 中追加下面代碼
taskcopyHtml(type:Copy){group='build'description='復(fù)制編譯后的index.html到 server 的 resource 目錄'from'client/dist/index.html'into'server/build/resources/main/static'}taskcopyStatic(type:Copy,dependsOn:'copyHtml'){group='build'description='復(fù)制編譯后的靜態(tài)文件到 server 的 resource 目、錄'from'client/dist/static'into'server/build/resources/main/static/static'}copyStatic.mustRunAfter('client:build')taskmergeBuild(dependsOn:['client:build',':copyStatic','server:bootJar']){group='build'description='合并編譯輸出'}taskindependentBuild(dependsOn:['client:build','server:bootJar']){group='build'description='獨(dú)立編譯輸出'}
此處主要解釋一下mergeBuild和independentBuild
mergeBuild：合并編譯輸出
合并編譯輸出輸出的意思，表示前后端開發(fā)的時候是分模塊分離開發(fā)，但是最終編譯到發(fā)布項(xiàng)目的時候，會將前端編譯的靜態(tài)內(nèi)容和html 復(fù)制道后臺SpringBoot 項(xiàng)目的靜態(tài)資源目錄中,從而達(dá)到一體發(fā)布。
independentBuild:獨(dú)立編譯輸出
獨(dú)立編譯輸出區(qū)別于mergeBuild是不會復(fù)制前端文件到SpringBoot端來，所以我們在部署項(xiàng)目的時候，需要單獨(dú)部署前端服務(wù)。
三、配置前端開發(fā)模式代理
client/config/index.js 修改proxyTable和port兩處配置，如圖所示。端口修改是因?yàn)?，SpringBoot 運(yùn)行的默認(rèn)端口也是8080，為了不沖突，前端修改端口。proxyTable表示在開發(fā)階段，前端所有已/server開頭的請求,都代理到http://localhost:8080后臺服務(wù)進(jìn)行處理，pathRewrite意思是代理的轉(zhuǎn)發(fā)時，剔除/server部分。
例：
前臺請求：http://localhost:8081/server/user/list
實(shí)際代理執(zhí)行請求：http://localhost:8080/user/list
端口和路徑都發(fā)生了變化
到此項(xiàng)目的初始配置就基本完成。
最后：如何運(yùn)行項(xiàng)目
找到 idea 右邊欄上的 Gradle 選項(xiàng)卡，打開找到 vueb 下面的 Tasks>appplication>bootRun 右鍵選擇Create 'vueb [bootRun]'...
在 Arguments 中增加-parallel參數(shù)，然后 ok。
最后在運(yùn)行欄中可以看到配置的啟動項(xiàng)。點(diǎn)擊旁邊的三角形就可以同時啟動前端和后端服務(wù)。
最后可以看到控制臺提示兩個啟動成功的信息，則表示項(xiàng)目構(gòu)建成功。
上圖所示，表示 SpringBoot 項(xiàng)目啟動成功
上圖所示，前端項(xiàng)目啟動成功，我們可以訪問http://localhost:8081
