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>

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';