vue项目中使用 NProgress 进度加载插件

场景：每次进入页面时，页面顶部都有一个加载条

 

 下来说下这个效果怎么实现的

第一步：下载 NProgress 插件

npm install --save nprogress

 第二步：导入 nprogress 并配置

        切记：NP 都必须是大写

        我是在路由页面中导入的

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
// 简单配置
NProgress.inc(0.2)
NProgress.configure({ minimum:0.1,easing: 'ease',trickle:false,trickleRate: 0.02,trickleSpeed: 800, speed: 500, showSpinner: true })
//   minimum:0.1, // 最小百分比
//   template: "..." // 修改标记结构，需要一个包含 role='bar' 属性的元素。
//   ease: 'ease',  // 动画设置
//   speed: 500, // 速度设置毫秒ms
//   trickle: false, // 关闭进度条步进
//   trickleRate: 0.02, // 度条步进
//   trickleSpeed: 800, // 度条步进速度毫秒ms
//   showSpinner: false // 关闭进度环 默认true

第三步：使用 

        

//路由切换前开启进度条
router.beforeEach((to,from,next)=>{
    NProgress.start()///显示进度条
})

//路由切换后，关闭进度条
router.afterEach((to,from)=>{
    NProgress.done()//关闭加载进度条
})

也可以自定义进度条 

#nprogress .bar {
    background:url(../images/loading.jpg) !important;
    height: 20px !important;
}