写前端的时候，想写一个顶部的进度条功能，然后就找到了NProgress。加上axios的拦截器，可以很方便的做一个顶部进度条的样式。

1、安装 Nprogress

npm install nprogress --save

2、创建aixos.js文件

写入

import axios from 'axios'
import NProgress from "nprogress";
import 'nprogress/nprogress.css'

axios.interceptors.request.use(config => {
        NProgress.inc();
        return config;
    }, error => {
        NProgress.done();
        return Promise.reject(error)
    }
)
axios.interceptors.response.use(res => {
        NProgress.done();
        return res;
    }, error => {
        NProgress.done();
        return Promise.reject(error)
    }
)

export default {
    NProgress
}

3、在main.js中引入

import axios from "./plugins/axios";
...

new Vue({
    ...
    axios,
    ...
    render: h => h(App)
}).$mount('#app')

4、修改样式

如果需要修改进度条样式，可以把nprogress.css提取出来，然后引入：

import '../../src/assets/css/nprogress.css'