開發環境
- IDEA V2018.5
- npm v6.4.x
- vue-cli v2.9.x
創建項目
IDEA > Create New Project > Gradle
此處的 Frameworks全部取消勾選,接著就一直 Next，提示填寫的地方填寫，不需要填寫的就用默認配置就 ok。
項目創建成功，項目結構應該是這樣的。
創建後臺模塊
▼ 項目 > 右鍵 > New > Module
配置後臺模塊
一、配置模塊依賴
在根項目的settings.gradle文件中增加 include 'server'
二、完善 server 項目工程結構
server 目錄默認創建出來只有一個build.gradle文件，我們需要手工完善項目結構
- src 目錄下游 main 目錄，正常情況此處src 下還需要有 test 目錄，這裡演示就略過了。
- main 下面創建 java 和 resources 。
- java 下面創建對應的包結構和 SpringBoot 的啟動類，代碼如圖的右邊區域，非初次接觸 SpringBoot 對這個代碼應該不陌生。
- resources 目錄下暫時就只創建配置文件application.yml。
三、配置後臺數據源
加入了數據源的 SpringBoot 項目需要在application.yml中配置數據源信息，否則項目會啟動失敗。
# 配置項目的數據源
spring:
datasource:
driver-class-name: com.mysql.jdbc.Driver
url: jdbc:mysql://localhost:3306/test?characterEncoding=UTF-8&useUnicode=true&useSSL=false
password: root
username: root
到此後臺模塊創建配置完成
創建前端模塊
▼ 項目 > 右鍵 > New > Module
我們需要將 client 模塊初始化為 vue 項目。這裡我們用到的 vue 提供的vue-cli模塊。
關於 vue-cli 的安裝請參考百度。初始化 vue 項目
打開 idea 底部的 Terminal
注意： 此處的項目名稱一定需要和你的創建前端模塊的名稱一致。例如我的前端模塊目錄是 client，我這裡就是vue init webpack client。然後其他的配置，的配置選項就是正常的 vue 初始化過程了。我這裡選擇的構建工具是 Yarn，不是 npm。此處的選擇不影響後面的構建。
這一步完成後，基本的前端模塊算初始化完成。接下來，我們需要將前端模塊整合道 Gradle 中便於統一編譯和管理。
配置前端模塊
一、clinet/build.gradle配置
plugins {
id "com.moowork.node" version "1.2.0"
}
node {
version = '8.7.0'
yarnVersion = '1.3.2'
download = true
}
task bootRun(dependsOn: 'start') {
group = 'application'
description = 'Run the client app (for use with gradle bootRun -parallel）'
}
task start(type: YarnTask, dependsOn: 'yarn') {
group = 'application'
description = 'Run the client app'
args = ['run', 'start']
}
task build(type: YarnTask, dependsOn: 'yarn') {
group = 'build'
description = 'Build the client bundle'
args = ['run', 'build']
}
此處主要是為Gradle 配置了幾個任務。大致意思就是用 Gradle 來代理執行前端的編譯命令。
二、build.gradle配置
這裡需要配置是根項目下的build.gradle
在build.gradle 中追加下面代碼
task copyHtml(type: Copy) {
group = 'build'
description = '複製編譯後的index.html到 server 的 resource 目錄'
from 'client/dist/index.html'
into 'server/build/resources/main/static'
}
task copyStatic(type: Copy, dependsOn: 'copyHtml') {
group = 'build'
description = '複製編譯後的靜態文件到 server 的 resource 目錄'
from 'client/dist/static'
into 'server/build/resources/main/static/static'
}
copyStatic.mustRunAfter('client:build')
task mergeBuild(dependsOn: ['client:build', ':copyStatic', 'server:bootJar']) {
group = 'build'
description = '合併編譯輸出'
}
task independentBuild(dependsOn: ['client:build', 'server:bootJar']) {
group = 'build'
description = '獨立編譯輸出'
}
此處主要解釋一下mergeBuild和independentBuild
mergeBuild：合併編譯輸出
合併編譯輸出輸出的意思，表示前後端開發的時候是分模塊分離開發，但是最終編譯到發佈項目的時候，會將前端編譯的靜態內容和html 複製道後臺SpringBoot 項目的靜態資源目錄中,從而達到一體發佈。
independentBuild:獨立編譯輸出
獨立編譯輸出區別於mergeBuild是不會複製前端文件到SpringBoot端來，所以我們在部署項目的時候，需要單獨部署前端服務。
三、配置前端開發模式代理
到此項目的初始配置就基本完成。
最後：如何運行項目
閱讀更多 程序猿的內心獨白 的文章
