Use the nprogress plug-in in the vue project to achieve the effect of the progress bar of the web page

Show results:

Realize the function:

When there is a request in the project, the progress bar in the webpage will start to move forward, and when the data from the server returns successfully, the progress bar will disappear

Implementation steps:

1. Install the nprogress plugin

npm install --save nprogress

2. Introduce nprogress

In the request.js file that configures the secondary packaging of axios, first introduce the progress bar and the style of the related progress bar

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

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

3. Configure nprogress

Add the code to start the progress bar in the request interceptor

nprogress.start()

Add the code to start the progress bar in the response interceptor

nprogress.done()

After the above configuration, you can see the blue (default) progress bar effect on the top of the web page after sending the request . If you want to change the color and other styles in the future, you can change it in the nprogress.css file