vue3 nprogress 使用nprogress 介绍与作用 1.nprogress 是一个轻量级的进度条组件，主

nprogress 介绍与作用

1.nprogress 是一个轻量级的进度条组件，主要用于在页面加载或路由切换时显示一个进度条，提升用户体验。它的原理是通过在页面顶部创建一个 div，并使用 fixed 定位来实现进度条的效果

2.在 Vite + Vue 3 项目中，nprogress 可以在路由切换时显示进度条，让用户知道页面正在加载。这在多页面应用中尤其有用，可以减少用户的等待焦虑感

3.配合路由守卫，在路由切换时调用 nprogress 的 start() 和 done() 方法，即可实现进度条的显示和隐藏

安装依赖

npm install nprogress --save

使用 nprogress：在路由守卫中使用 nprogress 来显示进度条

router/index.ts 中使用

import {start , done} from '@/lib/nprogress'

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

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

nprogress.ts 文件
```
// /src/lib/nprogress.ts
```

import NProgress from 'nprogress'; import 'nprogress/nprogress.css';

//全局进度条的配置 NProgress.configure({ easing: 'ease', // 动画方式 speed: 300, // 递增进度条的速度 showSpinner: false, // 是否显示加载ico trickleSpeed: 200, // 自动递增间隔 minimum: 0.3, // 更改启动时使用的最小百分比 parent: 'body' //指定进度条的父容器 });

// 打开进度条 export const start = () => { NProgress.start(); };

// 关闭进度条 export const done = () => { NProgress.done(); };


### 注意：
![alt text](354375c48b6ba3c70cec75e87a13b11.png)

安装依赖 npm install @types/nprogress --save-dev