一、先搭建vue环境

1. 去官网下载Nodejs，如果希望稳定的开发环境则下LTS
   https://nodejs.org/en/download/
2. 安装好后win+r输入node -v查询是否安装成功，如下出现版本号即为成功
   
3. 高版本的nodejs自带npm，则不必再下载，查询命令npm -v
   
4. 安装镜像，以淘宝镜像为例子
   cmd -> npm install -g cnpm --registry=http://registry.npm.taobao.org
5. 全局安装vue脚手架
   cmd -> npm install --g vue -cli
6. 新建一个vue项目
   
   然后按照提示输入即可，如下：
   
7. 启动后访问，进入test-vue项目中执行npm run dev启动，如下图访问http://localhost:8081即可，因为8080端口已经呗使用，所以会自动使用下一个8081
   

二、前后台交互，及解决跨域问题，使用axios

使用的开发工具是WebStorm，也可以使用vscode

1. 安装axios，命令：npm install axios（注意：我在使用cnpm install axios安装axios后在package-log.json里找不到axios，很怪异的问题，所以我就用npm install axios就可以了）
2. 配置前端访问地址，可以将ip和端口修改，访问的时候就需要使用修改后的ip和端口访问了，如host改成192.168.1.66
   
3. 设置proxyTable，配置代理信息，也就是调用接口的地址代理

proxyTable: {
  '/demo/api': {
    target: 'http://192.168.1.66:8060/demo/api',
    changeOringin: true,
    pathRewrite: {
      '^/demo/api':'/'
    }
  }
},

4. 设置代理

import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'
import qs from 'qs'

//引用axios，并设置基础URL为后端服务器api地址
//将api绑定到全局
Vue.prototype.$axios = axios;
Vue.prototype.$qs = qs;
//阻止启动时产生消息
Vue.config.productionTip = false;
//注意，这里只能设置proxyTable的键名，不能设置http://192.168.1.66:8060/demo/api，否则代理可能会不成功
axios.defaults.baseURL = '/demo/api'
//设置传输头类型
//axios.defaults.headers.post['Content-Type']='content-type:application/json;charset=utf-8';
axios.defaults.headers.post['Content-Type']='application/x-www-form-urlencoded;charset=utf-8';

//表示使用表单传参到后台，如果不使用的话，后台需要加@RequestBody注解在参数上，表示传json过来，否则传参为空
axios.interceptors.request.use(function (config) {
    if(config.method === "post"){
        config.data = qs.stringify(config.data)
    }
    return config;
},function (error) {
    return Promise.reject(error);
});

5. 新建一个vue
   
6. 设置路由
   
7. 打断点到后台就可以看到了，启动后点击屏幕的get
   

三、可以使用webstorm工具build一下项目，或者cmd进到该项目下执行npm run build就可以了

E:\Demo\test-vue>npm run build
可以看到多了个dist文件夹

只要将dist下的static复制到springboot下的/src/main/resources下，启动即可