[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

Over