vue3中使用NProgress的用法

vue3中使用NProgress的用法

自我记录

跳转页面的时候顶部的进度条实现方式 下面是github地址
https://github.com/rstacruz/nprogress
主要记住两个api就可以简单的使用
开启 NProgress.start()
关闭 NProgress.end()

1.首先安装
Ps:npm 5.0.0 之前，有 --save 参数才会把模块写入到 packages.json。现在已经是内置参数，不用额外写了

npm install nprogress
or
yarn add nprogress
or
pnpm add nprogress

2.使用了ts的小伙伴记得安装ts类型 (项目没有ts的可以跳过)

pnpm add @types/nprogress -D

3.引入并使用 src/router/index.ts

import {
   
    createRouter, createWebHistory } from 'vue-router'
// 引入进