veu 中 nprogress 的 使用方法

今天偶然发现一个进度条的轻量组件，之前再某个项目中见过，但不知道是上面组件，也没有深究，今天偶然看到，便试一下这个组件的用法并记录下来。

1、安装

	npm install --save nprogress

2、引入

	import Nprogress from 'nprogress' // js
	import 'nprogress/nprogress.css' // 样式

3、使用
我的后台管理系统处于起步阶段，刚写到路由处，所以暂且与router 一起使用，后续会把与axios一起使用的方法奉上。

	router.beforeEach((to, from, next) => {
	    NProgress.start(); // 显示进度条
	});
	
	router.afterEach(() => {
	    NProgress.done(); // 关闭进度条
	});

4、配置
minimum：设置最低百分比。

	NProgress.inc(0.2); 

百分比：通过设置progress的百分比，调用 .set(n)来控制进度，其中n的取值范围为0-1。

	 NProgress.set(0.4);

showSpinner：进度环显示隐藏
ease：调整动画设置，ease可传递CSS3缓冲动画字符串（如ease、linear、ease-in、ease-out、ease-in-out、cubic-bezier）。speed为动画速度（单位ms）。

	NProgress.configure({
        easing: "ease",
        speed: 500,
        showSpinner: false
    });

最后，我项目的进度环不知道为什么隐藏不了，无奈，我只能改变样式去掉了。

	#nprogress .spinner {
	    display: none !important;
	}