在 Vue 3.2 中使用 NProgress

NProgress 是一个轻量级的进度条库，由于 Element Plus 本身是没有进度条组件的，所以记录一下 NProgress 的用法。

在项目中安装

使用 npm：

1	npm install --save nprogress

安装其类型申明文件：

1	npm i @types/nprogress -D

简单封装

utils 目录下新建 nprogress.ts：

import NProgress from 'nprogress'  
import 'nprogress/nprogress.css'  
  
NProgress.configure({  
  easing: 'ease', // 动画方式  
  speed: 500, // 递增进度条的速度  
  showSpinner: true, // 是否显示加载ico  
  trickleSpeed: 200, // 自动递增间隔  
  minimum: 0.3 // 初始化时的最小百分比  
})  
  
export default NProgress

Vue 中切换路由时使用

// router/persmission.ts

import NProgress from '@/config/nprogress'

...

router.beforeEach((pre, next) => {
  NProgress.start()
})

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

Axios 请求时使用

import axios from 'axios'
import NProgress from 'nprogress'

//...

// 添加请求拦截器  
request.interceptors.request.use(  
  function (config) {  
    NProgress.start()  
    return config  
  },  
  function (error) {  
    return Promise.reject(error)  
  }  
)

// 添加响应拦截器  
request.interceptors.response.use(  
  function (response) {
    NProgress.done()
    return response.data  
  },  
  function (error) {  
    NProgress.done()  
    return Promise.reject(error)  
  }  
)

本文作者：Kiro

本文链接： https://www.kiro.cc/2023/09/nprogress/

更新于 2023-09-07