[toc]
开发环境
- IDEA V2018.5
- npm v6.4.x
- vue-cli v2.9.x
创建项目
IDEA > Create New Project > Gradle
2018-10-27.10.40.49-image.png
此处的 Frameworks全部取消勾选,接着就一直 Next，提示填写的地方填写，不需要填写的就用默认配置就 ok。
项目创建成功，项目结构应该是这样的。
2018-10-27.10.48.48-image.png
创建后台模块
▼ 项目 > 右键 > New > Module
2018-10-28.00.50.19-image.png
▼ Spring Initializr
2018-10-28.00.52.21-image.png
▼ 这一步按照正常项目信息填写。
注意：Type 属性需要选择 Gradle Config
2018-10-28.00.54.47-image.png
▼ 按照自己需要的依赖进行选取
2018-10-28.00.57.14-image.png
▼ 下一步默认，然后 Finish。之后需要等待 Gradle 进行模块的初始化，如果是首次创建 SpringBoot 项目，此处初始化可能需要比较长的时间，需要耐心和良好的网络环境。
2018-10-28.01.03.54-image.png
成功后是如上所示结构，之后我们需要手动完善一些结构和配置
配置后台模块
一、配置模块依赖
在根项目的settings.gradle文件中增加 include ‘server’
2018-10-28.01.08.45-image.png
二、完善 server 项目工程结构
server 目录默认创建出来只有一个build.gradle文件，我们需要手工完善项目结构
2018-10-28.01.15.43-image.png
如上图所示，可以看到，我们其实建立出来的就是一个标准的 java 工程结构。
- src 目录下游 main 目录，正常情况此处src 下还需要有 test 目录，这里演示就略过了。
- main 下面创建 java 和 resources 。
- java 下面创建对应的包结构和 SpringBoot 的启动类，代码如图的右边区域，非初次接触 SpringBoot 对这个代码应该不陌生。
- resources 目录下暂时就只创建配置文件
application.yml。
三、配置后台数据源
加入了数据源的 SpringBoot 项目需要在application.yml中配置数据源信息，否则项目会启动失败。
2018-10-28.02.32.31-image.png
# 配置项目的数据源
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
2018-10-28.01.25.41-image.png
前端模块这里选择 Gradle，然后注意右边 Frameworks 这里需要取消 java 的勾选
2018-10-28.01.28.34-image.png
这一步只需要填写一下 ArtifactId，名字可以自己定义，不一定要照搬我的命名习惯。然后一直下一步 直到 Finish。
2018-10-28.01.30.37-image.png
模块完成初始化后，结构如上图所示，多出一个 client 目录，也是只有一个 build.gradle 文件。由于这个我们之间选择的新增 Gradle 的模块，所以在 settings.gradle 文件中，工具自动帮我们把 include 补全了。
▼▼▼接下来就是比较关键的步骤了,敲黑板…..▼▼▼
我们需要将 client 模块初始化为 vue 项目。这里我们用到的 vue 提供的vue-cli模块。
关于 vue-cli 的安装请参考百度。
初始化 vue 项目
打开 idea 底部的 Terminal
2018-10-28.01.38.58-image.png
在控制台输入：
vue init webpack client
注意： 此处的项目名称一定需要和你的创建前端模块的名称一致。例如我的前端模块目录是 client，我这里就是vue init webpack client。然后其他的配置，的配置选项就是正常的 vue 初始化过程了。我这里选择的构建工具是 Yarn，不是 npm。此处的选择不影响后面的构建。
2018-10-28.01.46.08-image.png
这一步完成后，基本的前端模块算初始化完成。接下来，我们需要将前端模块整合道 Gradle 中便于统一编译和管理。
配置前端模块
一、clinet/build.gradle配置
2018-10-28.01.54.54-image.png
将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
2018-10-28.02.01.29-image.png
在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端来，所以我们在部署项目的时候，需要单独部署前端服务。
三、配置前端开发模式代理
2018-10-28.02.12.45-image.png
client/config/index.js 修改
proxyTable和port两处配置，如图所示。端口修改是因为，SpringBoot 运行的默认端口也是8080，为了不冲突，前端修改端口。proxyTable表示在开发阶段，前端所有已/server开头的请求,都代理到http://localhost:8080后台服务进行处理，pathRewrite意思是代理的转发时，剔除/server部分。例：
前台请求：
http://localhost:8081/server/user/list实际代理执行请求：
http://localhost:8080/user/list端口和路径都发生了变化
到此项目的初始配置就基本完成。
最后：如何运行项目
2018-10-28.02.22.52-image.png
找到 idea 右边栏上的 Gradle 选项卡，打开找到 vueb 下面的 Tasks>appplication>bootRun 右键选择
Create 'vueb [bootRun]'...
2018-10-28.02.24.32-image.png
在 Arguments 中增加
-parallel参数，然后 ok。
2018-10-28.02.26.27-image.png
最后在运行栏中可以看到配置的启动项。点击旁边的三角形就可以
同时启动前端和后端服务。
2018-10-28.02.27.45-image.png
最后可以看到控制台提示两个启动成功的信息，则表示项目构建成功。
2018-10-28.02.36.03-image.png
上图所示，表示 SpringBoot 项目启动成功
2018-10-28.02.36.17-image.png
上图所示，前端项目启动成功，我们可以访问
http://localhost:8081
2018-10-28.02.38.04-image.png
