首先，在main.js中引入axios以及Loading(此外，我使用了element的按需加载，可以查看我的个人教程)，如果你是完整引入的则不需要import {Loading} from 'element-ui'

import {Loading} from 'element-ui'
import axios from "axios";

Vue.use(Loading);

定义一个开启以及关闭的方法，如果你觉得切换的时候屏幕会闪来闪去的，影响体验，你可以将遮罩层的背景弄为透明的,如不需要，你也可以设置自己喜欢的背景颜色，代码是background那部分。

let loading;
function startLoading() {    //使用Element loading-start 方法
  loading = Loading.service({
    lock: true,
    text: '拼命加载中...',
    background:'rgba(255,255,255,0)',
  })
}
function endLoading() {    //使用Element loading-close 方法
  loading.close()
}

在请求的时候开启菊花loading

//请求数据拦截器
axios.interceptors.request.use(request => {
  startLoading();
  return request
}, err => {
  return Promise.reject(err);
});

在接收response的时候关闭菊花loading，并且对错误的状态码进行一定的处理

//接收响应拦截器
axios.interceptors.response.use(response => {
  endLoading();
  return response
}, err => {
  if (err && err.response) {
    switch (err.response.status) {
      case 400: err.message = '请求错误(400)'; break;
      case 401: this.$router.push('/login'); break;
      case 403: err.message = '拒绝访问(403)'; break;
      case 404: err.message = '请求出错(404)'; break;
      case 408: err.message = '请求超时(408)'; break;
      case 500: err.message = '服务器错误(500)'; break;
      case 501: err.message = '服务未实现(501)'; break;
      case 502: err.message = '网络错误(502)'; break;
      case 503: err.message = '服务不可用(503)'; break;
      case 504: err.message = '网络超时(504)'; break;
      case 505: err.message = 'HTTP版本不受支持(505)'; break;
      default: err.message = `连接出错(${err.response.status})!`;
    }
  } else {
    err.message = '连接服务器失败!'
  }
  message.error(err.message);
  return Promise.reject(err);
});

如果想要修改loading logo的颜色，使用如下css，写入App.vue中

.el-loading-spinner .path{
  stroke:#ed4014!important;
}
.el-loading-spinner .el-loading-text{
  color: #ed4014!important;
}