给vue项目添加顶部进度条的效果

1.首先要安装nprogress依赖包

2.在main.js中导入，一个时nprogress的js文件，一个是css文件

// 导入Nprogress对应的js和css
import Nprogress from 'nprogress'//实现效果
import 'nprogress/nprogress.css'//对应的样式

3.想要实现进度条的效果（当发送请求时，页面顶部出现一个进度条，当服务器返回response之后，也就是接收到服务器响应数据之后，进度条消失），在nprogress中提供了两个函数，一个是 Nprogress.start()，即进度条出现，另一个时 Nprogress.done()，即进度条消失，想要达到理想进度条的效果，就需要在服务器发送请求时，调用 Nprogress.start()，而在收到相应后立即调用 Nprogress.done()，知道了原理，就简单多了

// 再request拦截器中展示进度条  Nprogress.start()
axios.interceptors.request.use(config => {
  Nprogress.start()
  config.headers.Authorization = window.sessionStorage.getItem("token")
  return config;
});

同时在设置一个response拦截器

// 再response拦截器中隐藏进度条 Nprogress.done()
axios.interceptors.response.use(config=>{
  Nprogress.done()
  return config
})

大功告成