Vue系列之顶部进度条（NProgress）

一、Vue顶部进度条（实战）
1、安装nprogress插件

1. 本地引入

2. npm或bower安装

	npm install --save nprogress
	bower install --save nprogress

2、在main.js中配置nprogress

	//导入进度条插件
	import NProgress from 'nprogress'
	import 'nprogress/nprogress.css'

	//全局进度条的配置
	NProgress.configure({ 
	  showSpinner: true,  //加载微调器设置,默认为true
	  //使用缓动（CSS缓动字符串）和速度（以毫秒为单位）调整动画设置。（默认：ease和200）
	  easing: 'ease',
	  speed: 2000,
	  minimum: 0,  //更改启动时使用的最小百分比
	})

	//对路由钩子函数进行设置
	//路由进入前
	router.beforeEach((to, from , next) => {
	  NProgress.start();
	  next();
	});
	//路由进入后
	router.afterEach(() => {  
	  NProgress.done()
	})

3、效果图

二、文档（收藏）
1、精简的main.js配置

	import NProgress from 'nprogress'
	import 'nprogress/nprogress.css'
	
	NProgress.configure({ showSpinner: false })
	
	router.beforeEach((to, from, next) => {
	  NProgress.start();
	  next();
	})
	
	router.afterEach(() => {
	  NProgress.done();
	})

2、官方文档

Demo网址：http://ricostacruz.com/nprogress/
GitHub: https://github.com/rstacruz/nprogress