Vue中使用NProgress进度条

1、安装

$ npm install nprogress --save
// 或者
$ yarn add nprogress

// 基本用法
NProgress.start();
NProgress.done();

2、使用

main.js

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

// 进度条将以0.2递增，设置动画方式和时长
NProgress.inc(0.2)
NProgress.configure({ easing: "ease", speed: 500, showSpinner: false })

router.js

router.beforeEach((to, from, next) => {
	NProgress.start();
});

router.afterEach(() => {
	NProgress.done();
})

axios.js

// http request 拦截器
axios.interceptors.request.use(config => {
	NProgress.start();
})

// http response 拦截器
axios.interceptors.respone.use(response => {
	NProgress.done();
})

自定义颜色

#nprogress .bar {
  height: 3px !important;
  background: #56a9ff !important; //自定义颜色
}