简介：NProgress 是浏览器加载时，出现在浏览器顶部的进度条。

---

文章目录：
一、NProgress 安装
二、NProgress 使用
三、NProgress 配置
四、Vue 中修改进度条颜色

---

一、NProgress 安装

1、使用 npm 或者 yarn 安装及可

npm install --save nprogress 
yarn add nprogress

任选一种安装

2、用法

NProgress.start(); //进度条出现
NProgress.done();  //进度条消失

二、NProgress 使用

1、路由文件中导入，页面跳转出现进度条

入口文件 main.js 引入 nprogress

import App from './App'
import VueRouter from 'vue-router'
import router from './router' // 路由配置文件

//引入 nprogress
import NProgress from 'nprogress' // 进度条
import 'nprogress/nprogress.css' // 引入样式

Vue.use(VueRouter)

// 简单配置
NProgress.inc(0.2)
NProgress.configure({ easing: 'ease', speed: 500, showSpinner: false })

// 进度条开始
router.beforeEach((to,from,next) => {
  NProgress.start() 
  next()
})

// 进度条结束
router.afterEach(() => {
  NProgress.done()
})

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

2、写在 axios 的请求拦截器和响应拦截器里，每次只要触发 axios 请求就加载进度条

// axios 请求拦截器
axios.interceptors.request.use(
  config => {
    NProgress.start() // 加载进度条开始
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

// 在 response 拦截器中，隐藏进度条 NProgress.done()
axios.interceptors.response.use(
  response => {
    NProgress.done() // 加载进度条结束
    return response
  },
  error => {
    return Promise.reject(error)
  }
)

三、NProgress 配置

1、showSpinner：进度环显示隐藏

NProgress.configure({showSpinner: false});

2、ease：调整动画设置，ease可传递CSS3缓冲动画字符串（如ease、linear 等）。speed为动画速度（单位ms）

NProgress.configure({ease:'ease',speed:500});

3、minimum：最低百分比

NProgress.configure({minimum:0.3});

4、百分比：通过设置progress的百分比，调用 .set(n)来控制进度，其中n的取值范围为0-1。

NProgress.set(0.4);

四、Vue 中修改进度条颜色

在App.vue中的style中增加：

#nprogress .bar {
    background: red !important; //自定义颜色
}