Vue项目开发，nprogress进度条加载之超详细讲解及实战案例
Nprogress的默认进度条很细，它的设计灵感主要来源于 谷歌，YouTube
他的安装方式也很简单，你可以有两种使用方式:
- 直接引入js和css文件
- 使用npm安装的的方式
直接引入：
Npm安装：
基本的使用方式
你可以调用 start() 和done()来进行进度条的控制
如果你准备在jQuery的Ajax调用接口的时候使用它的话可以考虑将其绑定到 到jQuery ajaxStart和ajaxStop事件。
下面是一个简单的实例：
高级用法
百分比设置
你可以调用.set(n)设置进度百分比，，其中n是0..1之间的数字。你可以手动的设置进度条的位置（百分百0.0~1.0之间）
设置进度条的递增
你可以使用.inc()来进行进度条的递增设置，如果它的值为空则以一个随机的量递增。这将永远不会达到100%。
当然你还可以给它设置一个特定的值，用来递增进度条
你可以使用trickle来关闭递增行为
通过将此设置为false来关闭自动递增行为。(默认值是true)
更改启动时使用的最小百分比。(默认值:0.08)
NProgress.configure({ minimum: 0.1 });
修改进度条的模板
你甚至可以修改进度条的模板，但要保证在页面留有一个一个role='bar’元素。
NProgress.configure({
template: "<div class='....'>...</div>"
});
easing 和 speed
可以使用easing (CSS easing字符串)和speed (ms)调整动画的设置。(默认值:ease和200)
showSpinner
你可以通过parent来设置进度条的父容器，默认父容器是body
另外 本插件的css体积很小，你可以使用它或者选择自己写一个也没问题。
nprogress在Vue中的使用
在router/index.js中创建如下代码：
并在main.js中引入 ./router
总结：
nprogress 很优美、灵活，我们可以通过源码看到他的所有可以设置的参数
那么可以根据我们项目需求进行相应的设置。 欢迎关注交流批评指正。
漫思
