创建项目

IDEA > Create New Project > Gradle

此处取消勾选,接着就一直 Next，提示填写的地方填写，不需要填写的就用默认配置就行 ok。项目创建成功，项目结构应该是这样的。

创建后端模块

项目 > 右键 > New > Module

Spring Initializr

1.这一步按照正常项目信息填写(注意：Type 属性需要选择 Gradle Config)

2.按照自己需要的依赖进行选取

3.下一步默认，然后 Finish。之后需要等待 Gradle 进行模块的初始化，如果是首次创建 SpringBoot 项目，此处初始化可能需要比较长的时间，需要耐心和良好的网络环境。

成功后是如下所示的结构，之后我们需要手动完善一些结构和配置

配置后端模块信息

一、配置模块依赖

在根项目的settings.gradle文件中增加 include 'server'

二、完善 server 项目工程结构

server 目录默认创建出来只有一个build.gradle文件，我们需要手工完善项目结构

如上图所示，可以看到，我们其实建立出来的就是一个标准的 java 工程结构。

• src 目录下游 main 目录，正常情况此处src 下还需要有 test 目录，这里演示就略过了。
• main 下面创建 java 和 resources 。
• java 下面创建对应的包结构和 SpringBoot 的启动类，代码如图的右边区域，非初次接触 SpringBoot 对这个代码应该不陌生。
• resources 目录下暂时就只创建配置文件application.yml。

配置后台数据源

# mysql数据库配置
server.port=8089
spring.datasource.url=jdbc:mysql://localhost/demo?useUnicode=true&characterEncoding=utf-8&serverTimezone=UTC
spring.datasource.username=root
spring.datasource.password=root
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver

到这后端模块完成

创建前端模块

项目 > 右键 > New > Module

此处取消勾选,接着就一直 Next，提示填写的地方填写，不需要填写的就用默认配置就行 ok。

模块完成初始化后，结构如上图所示，多出一个 web目录，也是只有一个 build.gradle 文件。由于这个我们之间选择的新增 Gradle 的模块，所以在 settings.gradle 文件中，工具自动帮我们把 include 补全了。

接下来就是比较关键的步骤

我们需要将 web模块初始化为 vue 项目。这里我们用到的 vue 提供的vue-cli模块

初始化 vue 项目

打开 idea 底部的 Terminal

在控制台输入：
vue create web

注意： 此处的项目名称一定需要和你的创建前端模块的名称一致。例如我的前端模块目录是 client，我这里就是vue create web。然后其他的配置选项就是正常的 vue 初始化过程了。

这一步完成后，基本的前端模块算初始化完成。接下来，我们需要将前端模块整合到 Gradle 中便于统一编译和管理

配置前端模块

一、web/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

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端来，所以我们在部署项目的时候，需要单独部署前端服务。

三、配置前端开发模式代理

vue.config.js 添加相关的后端代理配置

'use strict'
const path = require('path')
const defaultSettings = require('./src/settings.js')
function resolve(dir) {
  return path.join(__dirname, dir)
}
const name = defaultSettings.title || '管理系统'
const port = process.env.port || process.env.npm_config_port || 8081 // 端口
// vue.config.js 配置说明
//官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions
module.exports = {
  // 部署生产环境和开发环境下的URL。
   publicPath: process.env.NODE_ENV === "production" ? "/" : "/",
  // 在npm run build 或 yarn build 时 ，生成文件的目录名称（要和baseUrl的生产环境路径一致）（默认dist）
  outputDir: 'dist',
  // 用于放置生成的静态资源 (js、css、img、fonts) 的；（项目打包之后，静态资源会放在这个文件夹下）
  assetsDir: 'static',
  // 是否开启eslint保存检测，有效值：ture | false | 'error'
  lintOnSave: process.env.NODE_ENV === 'development',
  // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
  productionSourceMap: false,
  // webpack-dev-server 相关配置
  devServer: {
    host: '0.0.0.0',
    port: port,
    open: true,
    proxy: {
      [process.env.VUE_APP_BASE_API]: {
        target: `http://localhost:8089`,
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      }
    },
    disableHostCheck: true
  },
  configureWebpack: {
    name: name,
    resolve: {
      alias: {
        '@': resolve('src')
      }
    }
  },
  runtimeCompiler: true,
  chainWebpack(config) {
    config.plugins.delete('preload') // TODO: need test
    config.plugins.delete('prefetch') // TODO: need test

    // set svg-sprite-loader
    config.module
      .rule('svg')
      .exclude.add(resolve('src/icons'))
      .end()
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
      .end()

    config
      .when(process.env.NODE_ENV !== 'development',
        config => {
          config
            .plugin('ScriptExtHtmlWebpackPlugin')
            .after('html')
            .use('script-ext-html-webpack-plugin', [{
              // `runtime必须与runtimeChunk名称相同。 默认是“运行时”
              inline: /runtime\..*\.js$/
            }])
            .end()
          config
            .optimization.splitChunks({
            chunks: 'all',
            cacheGroups: {
              libs: {
                name: 'chunk-libs',
                test: /[\\/]node_modules[\\/]/,
                priority: 10,
                chunks: 'initial' // 仅打包最初依赖的第三方
              },
              elementUI: {
                name: 'chunk-elementUI', // 将elementUI拆分为一个包
                priority: 20, // 重量需要大于libs和app，否则将打包到libs或app中
                test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // 为了适应cnpm
              },
              commons: {
                name: 'chunk-commons',
                test: resolve('src/components'), // can customize your rules
                minChunks: 3, //  minimum common number
                priority: 5,
                reuseExistingChunk: true
              }
            }
          })
          config.optimization.runtimeChunk('single'),
            {
              from: path.resolve(__dirname, './public/robots.txt'), //防爬虫文件
              to: './', //到根目录下
            }
        }
      )
  }
}

到此项目的初始配置就基本完成

启动项目

最后可以看到控制台提示两个启动成功的信息，则表示项目构建成功