NProgress是一个轻量级的进度条组件，在Github上已经2.4万star数了，虽然这个组件已经好久没有更新了，最近一次更新是20年4月份，改了jQuery的版本，但是该组件的使用频率还是很高的。

插件安装

 $ npm install --save nprogress 
 $ yarn add nprogress

插件使用

App.vue

<script lang="ts">
import NProgress from "nprogress";
import "nprogress/nprogress.css";
import { useRouter } from "vue-router";
export default {
  setup() {
    const router = useRouter();
    router.beforeEach((to, from, next) => {
      NProgress.start();
      next();
    });
    router.afterEach(() => {
      NProgress.done();
    });
  },
};
</script>

axios中使用

main.ts

import 'nprogress/nprogress.css'

axios.ts

import NProgress from 'nprogress'

axios.interceptors.request.use(
  function (config: any) {
   // 在发送请求之前做某件事
    NProgress.start() //开始
    return config
  },
  (error: { data: { error: { message: any } } }) => {
    return Promise.reject(error.data.error.message)
  }
)


axios.interceptors.response.use(
  function (config: any) {
    aspShow.value = false
    NProgress.done() //结束
    if (config.status === 200 || config.status === 204) {
      return Promise.resolve(config)
    }
    return Promise.reject(config)
  },
  function (error: any) {
    aspShow.value = false
    NProgress.done() //结束
    if (error.response.status) {
      switch (error.response.status) {
        // 401: 未登录
        // 未登录则跳转登录页面，并携带当前页面的路径
        // 在登录成功后返回当前页面，这一步需要在登录页操作。
        case 401:
          router.replace({
            path: '/login',
            query: {}
          })
          break
       
        // 其他错误，直接抛出错误提示
        default:
          message.error(`${error.response.status}:${error.response.statusText}`)
      }
     
      NProgress.done()////结束
      return Promise.reject(error)
    }
    
  }
)

路由中使用

import NProgress from 'nprogress'

// 页面切换之前取消上一个路由中未完成的请求
router.beforeEach((_to: any, _from: any, next: () => void) => {
  NProgress.start()
  next()
})
router.afterEach(() => {
  // 进度条
  NProgress.done()
})

全局配置

//全局进度条的配置
NProgress.configure({
  easing: 'ease', // 动画方式
  speed: 1000, // 递增进度条的速度
  showSpinner: false, // 是否显示加载ico
  trickleSpeed: 200, // 自动递增间隔
  minimum: 0.3, // 更改启动时使用的最小百分比
  parent: 'body', //指定进度条的父容器
})

TS的项目，还需要安装其类型声明文件，命令如下：

npm i @types/nprogress -D

或者如下声明

declare module 'nprogress';