在VUE项目中使用NProgress请求进度条插件

通过NProgress可以实现路由跳转或是请求时在浏览器顶部的出现进度条
官网：http://ricostacruz.com/nprogress/
github：https://github.com/rstacruz/nprogress

如下图顶部红色进度条，颜色可更改

使用步骤：

//核心步骤：
//1.安装
npm install --save nprogress  
//2.导入
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
  
//3.设置进度条开始及结束；
NProgress.start();
NProgress.done(); 

因为需求是在该项目请求时出现进度条，所以是放在了axios的拦截器中

import Axios from 'axios'   //将其导入在axios模块中   css在main中导入
import NProgress from 'nprogress'

// 添加请求拦截器
Axios.interceptors.request.use(function (config) {
  NProgress.start();
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});


Axios.interceptors.response.use(function (response) {
  NProgress.done();
  // 对响应数据做点什么
  return response.data;
}, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error);
});

这样就能轻松实现进度条功能了，如果需要设置颜色也很简单

// NProgress的样式修改
#nprogress .bar {
    background: red !important; //自定义颜色
}

直接在全局css中写入即可自定义颜色。