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

效果展示：

实现功能：

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

实现步骤：

1、安装nprogress插件

npm i nprogress

2、引入nprogress

在配置axios二次封装的request.js文件中，引入进度条相关的js、css文件

import nprogress from 'nprogress'
import "nprogress/nprogress.css"

3.配置nprogress

在请求拦截器中配置进度条开始：

nprogress.start()

在响应拦截器中配置进度条结束：

nprogress.done()

4、关闭右侧转动的小圈

nprogress.configure({ showSpinner: false });

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

#nprogress .bar {
    /* background: red; */
    background-image: linear-gradient(to right, red, orange, yellow);
}