1.安装插件
npm i nprogress
因为当前是TS项目所以还需要安装它的类型声明文件：
npm i @types/nprogress
2.使用 nprogress
这里新建了一个ts文件稍微封装了一下：
import NProgress from "nprogress"; import "nprogress/nprogress.css"; NProgress.configure({ easing: "ease", // 动画方式 speed: 1000, // 递增进度条的速度 showSpinner: false, // 是否显示加载ico trickleSpeed: 200, // 自动递增间隔 minimum: 0.3, // 更改启动时使用的最小百分比 parent: "body", //指定进度条的父容器 }); // 开启进度条 export const start = () => { NProgress.start(); }; // 关闭进度条 export const close = () => { NProgress.done(); };
接着就是使用方式，我是放在了路由守卫里面：
