vue项目中利用nprogress插件实现网页进度条效果

效果展示:

实现功能：

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

实现步骤：

1.安装nprogress插件

npm install --save nprogress

2.引入nprogress

在配置axios二次封装的request.js文件中，首先引入进度条以及相关进度条的样式

//引入进度条
import nprogress from 'nprogress'

//引入相关进度条的样式
import "nprogress/nprogress.css"

3.配置nprogress

在请求拦截器添加进度条开始的代码

nprogress.start()

在响应拦截器添加进度条开始的代码

nprogress.done()

经过以上配置，在发出请求之后即可在网页上方看到蓝色（默认）进度条效果。如果后续中想要更改颜色等样式，在nprogress.css文件中更改即可