1.Spring boot后端的服务器配置、代码在上一篇文章中已写。
2.下面开始配置vue。
首先需要写好登录页面：
先回顾一下vue的结构：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.config.productionTip = false

Vue.use(ElementUI);
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

首先是主入口里面加载App.vue。App.vue又加载路由组件

index.js加载components文件夹下的组件

Login.vue下的代码为登录界面：

<template>
  <div>
    <el-form :rules="rules"  :model="loginForm" class="loginContainer" ref="loginform">
      <h3>系统登录</h3>
      <el-form-item label="用户名" prop="username">
        <el-input type="text" v-model="loginForm.username" auto-complete="off" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item label="用户密码" prop="password">
        <el-input type="password" v-model="loginForm.password" auto-complete="off" placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-checkbox v-model="checked" class="loginRememberMe" style="width: 100%">记住密码</el-checkbox>
      <el-button type="primary" style="width: 100%;margin-top: 10px" @click="loginSubmit">登录</el-button>
    </el-form>

  </div>
</template>

<script>
export default {
name: "Login",
  data(){
  return {
    loginForm:{
      username:'admin',
      password:'123',
    },
    checked:true,

    rules: {
      username: [{required: true, message: '请输入用户名', trigger: 'blur'}],
      password: [{required: true, message: '请输入密码', trigger: 'blur'}],
    },

  }
        },
  methods:{
    loginSubmit(){
      this.$refs.loginform.validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          this.$message.error('请输入用户名或者密码!');
          return false;
        }
    })
  }
}
}
</script>

<style >
  .loginContainer{
    border-radius: 15px;
    background-clip: padding-box;
    margin:auto;
    width: 350px;
    border: 1px solid #ffffff;
    padding: 15px 75px 35px 75px;
    background: #ffffff;
    box-shadow: 0 0 20px #2c3e50;
  }
  .loginRememberMe{
    text-align: left;
  }
</style>

然后做前后端的请求对接：是用axios请求：
首先在webstrome的terminal当中安装axios:输入npm install axios
安装完成后可以看到：

在src文件夹下新建一个utils文件夹，新建一个api.js用作封装发送key-value方式的请求：

import axios from 'axios'
import { Message } from 'element-ui'


axios.interceptors.response.use(//统一返回错误处理
  success=>{
    //success.status是http返回的响应码，而success.data.status才是服务器真正返回的json
    if (success.status && success.status == 200 && success.data.status == 500) {
      Message.error({message: success.data.msg});
      return;
    }
    if (success.data.msg){
      Message.success({message:success.data.msg})
    }
    return  success.data;
  },error => {
    if (error.response.status == 504 || error.response.status == 404) {
      Message.error({message: '服务器发生问题'})
    } else if (error.response.status == 403) {
      Message.error({message: '权限不足，请联系管理员'})
    } else if (error.response.status == 401) {
      Message.error({message: '尚未登录，请登录'})
    }else {
      if (error.response.data.msg){
        Message.error({message:error.response.data.msg})
      }else {
        Message.error({message:'未知错误！'})
      }
    }
    return;
  }
)

let base='';//加前缀直接修改base就够了
export const postKeyValueRequest=(url,params)=>{
  return axios({
    method:'post',
    url: `${base}${url}`,
    data:params,
    transformRequest:[function (data){
      let ret = '';
      for(let i in data){
        ret+=encodeURIComponent(i)+'='+encodeURIComponent(data[i])+'&'
      }
      console.log(ret);
      return ret;
    }],
    headers:{
      'Content-Type':'application/x-www-form-urlencoded'
    }
  });
}

先是封装一个axios请求成功与失败界面以element-ui方式返回提示的方法，然后封装好以key-value请求的postKeyValueRequest方法。

然后在Login.vue当中引入postKeyValueRequest方法：

import {postKeyValueRequest} from "../utils/api";

  methods:{
    loginSubmit(){
      this.$refs.loginform.validate((valid) => {
        if (valid) {
          this.postKeyValueRequest('/doLogin',this.loginForm).then(resp=>{
            if(resp){
              console.log(resp)
            }
          })
        } else {
          this.$message.error('请输入必要的字段!');
          return false;
        }
    })
  }
}

最后，需要设置端口转发，把从vue中从8080端口发送出去的转发到服务器8081端口接收！
在根目录下新建一个vue.config.js

let proxyObj ={};
proxyObj['/']={
    ws:false,
    target:'http://localhost:8085',
    changeOrigin:true,
    pathRewrite:{
        '^/':''
    }
}
module.exports={
    devServer:{
        host:'localhost',
        port:8080,
        proxy:proxyObj
    }
}

将vue在localhost:8080发出的请求转发到localhost:8081上。前后端同时启动。按登录出现如下界面：

至此前后端连接成功！