开发环境
- 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端来，所以我们在部署项目的时候，需要单独部署前端服务。
三、配置前端开发模式代理
到此项目的初始配置就基本完成。
最后：如何运行项目
閱讀更多 程序猿的內心獨白 的文章
