在Vue 3 + TypeScript的项目中使用NProgress进度条

NProgress是一个轻量级的进度条库，用于在页面加载和数据请求时显示进度条，以提供用户友好的反馈。在Vue 3 + TypeScript的项目中使用NProgress非常简单，下面将详细讲解如何集成和使用NProgress进度条。

步骤一：安装NProgress
首先，我们需要通过npm或yarn安装NProgress。在命令行中运行以下命令来安装NProgress：

npm install nprogress

步骤二：创建进度条组件
在Vue项目中，我们可以创建一个单独的进度条组件，用于显示进度条。首先，在src/components目录下创建一个名为"ProgressBar.vue"的文件，并添加以下代码：

<template>
  <div class="progress-bar"></div>
</template>

<script>
import NProgress from "nprogress";

export default {
  mounted() {
    NProgress.configure({ showSpinner: false });
    NProgress.start();
  },
  beforeUnmount() {
    NProgress.done();
  }
};
&