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 很优美、灵活，我们可以通过源码看到他的所有可以设置的参数

那么可以根据我们项目需求进行相应的设置。 欢迎关注交流批评指正。