使用NProgress插件实现页面进度条

需求：当项目中如果出现了发请求，则网页中的进度条会开始向前走，当服务器的数据返回成功以后，那么进度条则会消失。

NProgress的官方网址:https://ricostacruz.com/nprogress/

实现步骤：

第一步：安装插件

npm i nprogress

第二步：在main.js引入

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

第三步：配置

// 请求拦截器
axios.interceptors.request.use(config=>{
  // 展示进度条
  NProgress.start()
  return config;
});
// 响应拦截器
axios.interceptors.response.use(res=>{
  // 隐藏进度条
  NProgress.done()
  return res
})

改变进度条颜色

<style>
// 自定义进度条颜色
 #nprogress .bar {
     background: #F811B2 !important; //自定义颜色
  }
</style>

关闭右侧转动的小圈

nprogress.configure({ showSpinner: false });