vue3 vite 使用NProgress.js纳米级进度条

NProgress.js 官网：https://ricostacruz.com/nprogress/

安装方式：

npm install nprogress

---

使用方法

在router 的index.js文件下引入

// 引入NProgress进度条
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

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

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

---

修改进度条样式

// 修改进度条颜色 全局css文件中添加，也可以独立出一个css文件，在页面处单独引入
#nprogress .bar {
  background: red !important;
}

NProgress.js的一些方法：

显示进度条（shows the progress bar）：

NProgress.start()

设置进度条加载的百分比（sets a percentage）

NProgress.set(0.4)

进度条增加一点点（increments by a little）

NProgress.inc()

进度条加载完成（completes the progress）

NProgress.done()

圆圈加载：showSpinner

加载条右下方的小圈圈，通过将加载微调器设置为 false 来关闭它。（默认值：true)

NProgress.configure({ showSpinner: false });