vue nprogress

// 引入 NProgress 库
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';

// 在路由守卫中使用 NProgress
const router = new VueRouter({
  routes: [
    // 定义你的路由
  ]
});

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

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

// 如果需要手动控制进度条，可以在其他地方调用以下方法
// NProgress.set(0.4); // 设置进度为40%
// NProgress.inc(); // 增加一点进度
// NProgress.done(); // 结束进度条

解释说明：

1. 引入 NProgress：首先需要通过 import 语句引入 NProgress 库及其样式文件。
2. 路由守卫：在 Vue Router 的 beforeEach 和 afterEach 钩子中分别调用 NProgress.start() 和 NProgress.done() 方法来开始和结束进度条。
3. 手动控制：如果需要手动控制进度条的进度，可以使用 NProgress.set()、NProgress.inc() 等方法。

这样就可以在页面切换时显示一个平滑的加载进度条，提升用户体验。