Vue 进度条安装（nprogress）

第一步：在项目总文件下：npm install --save nprogress

npm install --save nprogress 

第二步：在配置axios的request页面中引入

import NProgress from 'nprogress'

// 这是进度条的一些配置项
NProgress.configure({
  easing: 'speed',  // 动画方式
  speed: 500,  // 递增进度条的速度
  showSpinner: false, // 是否显示加载ico
  trickleSpeed: 200, // 自动递增间隔
  minimum: 0.3 // 初始化时的最小百分比
});

// 配置全局拦截
axios.interceptors.request.use((req) => {
  // 引用开始
  NProgress.start()
  return req
})
axios.interceptors.response.use((res) => {
  // 引用结束
  NProgress.done()
  return res
})

第三步：千万不要忘了全局下面（main.js) 引入CSS样式: import 'nprogress/nprogress.css'

第四步：如果想要修改进度条颜色，就是App.vue文件的样式里设置：

<template>
  <div id="app">
    <router-view />
  </div>
</template>



<style lang="less">
  // 进度条自定义颜色
  #nprogress .bar {
    background: rgb(250, 70, 70) !important; //自定义颜色
  }

</style>

第五步：附API文档