vue3 nprogress

// 引入 NProgress 库
import NProgress from 'nprogress';
// 引入 NProgress 的样式文件
import 'nprogress/nprogress.css';

// 在 Vue 3 项目中使用 NProgress

// 创建一个插件来管理 NProgress 的启动和完成
export default {
  install: (app) => {
    // 启动 NProgress
    app.config.globalProperties.$startLoading = () => {
      NProgress.start();
    };

    // 完成 NProgress
    app.config.globalProperties.$finishLoading = () => {
      NProgress.done();
    };

    // 监听路由变化时自动启动和完成加载条
    app.config.globalProperties.$onBeforeRouteUpdate = (to, from, next) => {
      NProgress.start();
      next();
    };

    app.config.globalProperties.$onRouteLeave = () => {
      NProgress.done();
    };
  }
};

// 在 main.js 中引入并使用这个插件
import { createApp } from 'vue';
import App from './App.vue';
import loadingPlugin from './plugins/loadingPlugin'; // 假设你将上面的代码保存为 plugins/loadingPlugin.js

const app = createApp(App);
app.use(loadingPlugin);
app.mount('#app');

解释说明：

1. 引入 NProgress：首先我们需要从 nprogress 包中引入 NProgress，并且引入它的样式文件。
2. 创建插件：我们创建了一个 Vue 插件，用于在应用程序中全局使用 NProgress。通过 app.config.globalProperties 将方法挂载到 Vue 实例上，以便可以在组件中通过 this 访问这些方法。
3. 路由监听：我们监听了路由的变化，当路由更新时启动 NProgress，当路由离开时完成 NProgress。
4. main.js 中引入插件：最后，在 main.js 中引入并使用这个插件，确保它在应用初始化时被注册。

这样，你就可以在 Vue 3 项目中轻松集成 NProgress 来显示页面加载进度条了。