【Vue3+Ts project】认识 nprogress 和 @types/nprogress库

目标：

使用 nprogress 库完成切换路由时 顶部进度条加载

1.安装插件

pnpm add nprogress

pnpm add @types/nprogress -D
或
npm install nprogress
npm install  @types/nprogress -D

2.引入nprogress库 和 nprogress样式在router文件内

import NProgress from 'nprogress'

import 'nprogress/nprogress.css'

3.切换路由前开启

router.beforeEach(to => {
  NProgress.start()
})

4.路由切换完毕后关闭

扫描二维码关注公众号，回复： 15668057 查看本文章

router.afterEach(to => {
  NProgress.done()
})

5.关闭右上角 小圆圈默认加载

NProgress.configure({
  showSpinner: false
})

6.修改进度条颜色 ,全局样式文件 main.scss

#nprogress .bar { 
  background-color: #16C2A3 !important;
}

注意: 如果你的typescript插件报错

can only be default-imported using the 'esModuleInterop' flagts(1259) index.d.ts(45, 1): This module is declared with 'export =', and can only be used with a default import when using the 'esModuleInterop' flag. import NProgress

解决报错：

在 "compilerOptions" 部分中添加 "esModuleInterop": true。

{
  "compilerOptions": {
    "esModuleInterop": true,
    // 其他选项...
  },
  // 其他配置...
}

另外需要配置路由的教程查看这文章
Vue3/ Vue3内 Vue-router Vue3路由 完整配置流程_vue3 router 配置_春暖花开.,的博客-CSDN博客