快捷導(dǎo)航

詳解如何在Vue3+TS的項目中使用NProgress進度條

更新時間：2022年06月21日 15:15:37 作者：一碗周

本文主要介紹了詳解如何在Vue3+TS的項目中使用NProgress進度條，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

寫在前面

NProgress是一個輕量級的進度條組件，在Github上已經(jīng)2.4萬star數(shù)了，雖然這個組件已經(jīng)好久沒有更新了，最近一次更新是20年4月份，改了jQuery的版本，但是該組件的使用頻率還是高的。

?? 在項目中安裝

這里的包管理工具使用的npm，如果你使用的是yarn或者pnpm，請自行更改安裝命令，安裝命令如下：

npm i nprogress -S

因為我們是TS的項目，還需要安裝其類型聲明文件，命令如下：

npm i @types/nprogress -D

?? 簡單的封裝

現(xiàn)在我們對NProgress進行一下簡單的封裝，首先我們在utils目錄下創(chuàng)建要給nporgress.ts的文件，然后引入NProgress和CSS樣式文件，示例代碼如下：

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

然后我們對進度條進行一些基礎(chǔ)配置，示例代碼如下：

//全局進度條的配置
NProgress.configure({
  easing: 'ease', // 動畫方式
  speed: 1000, // 遞增進度條的速度
  showSpinner: false, // 是否顯示加載ico
  trickleSpeed: 200, // 自動遞增間隔
  minimum: 0.3, // 更改啟動時使用的最小百分比
  parent: 'body', //指定進度條的父容器
})

最后我們封裝兩個方法，一個是開始方法，一個是結(jié)束的方法，示例代碼如下：

// 打開進度條
export const start = () => {
  NProgress.start()
}

// 關(guān)閉進度條
export const close = () => {
  NProgress.done()
}

?? 在Vue切換路由時展示進度條

現(xiàn)在我們就來使用我們上面封裝的Nprogress，這里我們在VueRouter的配置文件中使用，實現(xiàn)切換路由時在頂部展示進度條，首先我們打開VueRouter的配置文件，然后引入我們封裝的Nprogress：

// router/index.ts

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

然后我們在創(chuàng)建的Router實例中使用這兩個方法：

const router = createRouter({
  routes,
  history: createWebHistory(),
})

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

router.afterEach(() => {
  close()
})