vue使用nprogress插件实现页面加载进度条

实现的效果图如下（页面加载时会有蓝色的进度条）：

1.下载nprogress插件

 npm install --save nprogress

2.在main.js中引入插件

import NProgress from 'nprogress' // 进度条
import 'nprogress/nprogress.css' //这个样式必须引入

3.在main.js中写一些简单的配置

NProgress.inc(0.2)
NProgress.configure({ easing: 'ease', speed: 500, showSpinner: false })

4.因为要实现的是页面路由的跳转的进度条，所以在vue-router的beforeEach和afterEach中调用 NProgress.start(); //开始
NProgress.done(); // 结束
还是在 main.js中，

router.beforeEach(() => {
  NProgress.start()
})
router.afterEach(() => {
  NProgress.done()
})

5.此篇文章参考 author清风斋 的 https://www.jianshu.com/p/408583294d61