nprogress 登录进度条插件

npm  install  nprogress

2。 main.js  引入

import    “nprogress/nprogress.css”

3。  封装 nprogress   

先引入    
import nprogress from 'nprogress'

// 显示全屏loading

export function showFullLoading(){

  nprogress.start()

}

// 隐藏全屏loading

export function hideFullLoading(){

  nprogress.done()

}


4、然后 在全局中组件使用  封装的方法  （这里是在权限守卫中使用的进度条）

5、 去app.vue      改变他进度条的 颜色 

#nprogress .bar{

  background-color: #f4f4f4!important;

  height: 3px!important;

}

6、然后在 用路由的后置守卫关掉进图条  

// 全局后置守卫    调用全局封装的方法

router.afterEach((to, from) => hideFullLoading())