vue3NProgress

NProgress是一个轻量级的JavaScript库，用于在页面加载时显示进度条。在Vue 3中使用NProgress，可以为你的单页应用(SPA)提供一个平滑的进度条效果，增加用户体验。你可以通过npm或yarn将NProgress添加到你的项目中，然后在Vue组件中引入并控制进度条的开始和结束。

首先，你需要通过npm或yarn来安装NProgress：

npm install nprogress --save
# 或者
yarn add nprogress

安装完成后，在你的Vue组件中引入NProgress，并在路由跳转或者状态变化时调用其API来控制进度条。例如：

import { createRouter, createWebHistory } from 'vue-router';
import NProgress from 'nprogress';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    // ...你的路由配置...
  ],
});

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

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

export default router;

在上面的代码中，我们在每次路由跳转前调用`NProgress.start()`开始进度条动画，在跳转结束后调用`NProgress.done()`结束进度条动画。你可以根据自己的需求调整进度条的显示与隐藏。