在vue3+TS中使用nprogress进度条插件

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();
};

接着就是使用方式，我是放在了路由守卫里面：

import {start,close} from '@/router/nprogress'

// 路由前置守卫
router.beforeEach((to, from, next) => {
start()
 
next();
});

// 路由后置守卫
router.afterEach((to, from) => {
  close()
});

最终呈现效果：