NProgress进度条在nuxt项目中使用

NProgress.js在nuxt项目中的使用

nprogress 插件是一个适用于ajax 应用的轻量级的进度条插件
使用步骤：
在plugins中新建一个文件引入NProgress和css文件

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

使用的话也非常的简单：

//开启进度条
NProgress.start();
//关闭进度条
NProgress.done();
//设置百分比
NProgress.set(0.4)
//稍微增加
NProgress.inc()

还可以配置一下参数：

//minimum 设置开始时最低百分比，默认是0.08
NProgress.configure({ minimum: 0.1 });
//template改变进度条的HTML结构。为了保证进度条正常工作，需要一个包含role='bar' 属性的元素
NProgress.configure({
  template: "<div class='....'>...</div>"
});
//ease和speed ease可传递CSS3缓冲动画字符串（如ease、linear、ease-in、ease-out、ease-in-out、cubic-bezier）。speed为动画速度（默认200，单位ms）
NProgress.configure({ easing: 'ease', speed: 500 });
//trickle 是否显示进度条，默认：true
NProgress.configure({ trickle: false });
//trickleSpeed设置每次进度条步进速度(ms)
NProgress.configure({ trickleSpeed: 200 });
//showSpinner是否显示环形进度动画，默认true
NProgress.configure({ showSpinner: false });
//parent 指定改变的父容器，默认body
NProgress.configure({ parent: '#container' });

其中进度条的背景颜色、高度等都可以自己改变nprogress.css来实现
最后一步，在路由跳转的时候使用：

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

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