草履虫都能学会的进度条效果，你还不会nprogress吗

hello！在我们的项目中，尤其是网页效果，也许会遇到进度条需求，那么我们怎么实现呢？这里介绍一个插件，可以快速实现进度条效果，草履虫都能学会！

（1）第一步，来到终端：

npm install --save nprogress

没错，插件名就是nprogress。
（2）第二步，在哪里使用。
一般情况下，我们可以在二次封装的axios中的拦截器中使用，项目中经常在src文件夹目录下建立api文件夹，比如我将axios二次封装写在request.js中。

//引入axios
import axios from 'axios'
//引入nprogress
import nprogress from 'nprogress'
//千万不要忘记引入进度条的样式
import 'nprogress/nprogress.css'
//可以去执行以下操作，会发现返回结果有start：进度条开始，done：进度条结束
// console.log(nprogress)
const requests = axios.create({
    baseURL:"/api",
    timeout:5000
})
//请求拦截器
requests.interceptors.request.use((config)=>{
	//start：进度条开始
    nprogress.start();
    return config
    
})
//响应拦截器
requests.interceptors.response.use((res)=>{
	//done：进度条结束
    nprogress.done()
    return res.data
},(error)=>{
    return Promise.reject(error);
})

export default requests

嗯！这样再配合我们的请求，就会发现出现进度条效果，没有的也可以重新npm run serve试试。

再聊聊进度条样式，它自带的是#29d色，如果开发需求要求我们更换进度条颜色，可以在目录执行ctrl+F查找nprogress/nprogress.css文件，修改其background即可，比如我想换个自定义颜色：

#nprogress .bar {
  /* background: #29d;*/
  background: rgb(255, 4, 0);
  position: fixed;
  z-index: 1031;
  top: 0;
  left: 0;

  width: 100%;
  height: 2px;
}

一些注意事项：
start、done的位置没写对可能出不来效果；一定要引入进度条的样式文件！

当然了有其他好用的插件也欢迎在评论区分享哦！