如何再Vue3 + TS的项目中使用NProgress进度条

 

本文主要介绍了详解如何在Vue3+TS的项目中使用NProgress进度条，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧！！！

 🍒前言

 NProgress是一个轻量级的进度条组件，虽然这个组件已经好久没有更新了，但是该组件的使用频率还是高的。

 🍒在项目中安装

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

npm i nprogress -S

因为我们是TS的项目，还需要安装其类型声明文件，命令如下：

npm i @types/nprogress -D

在使用时如下方式引入就行：

// 引入进度条

import nprogress from 'nprogress'

// 引入进度条样式

import 'nprogress/nprogress.css'

 🍒其实这个时候我们就可以用的，具体用法是在封装网络请求的时候可以使用或者是在路由跳转的时候使用，我的项目中是在网络请求(axios)中使用的。

import axios, { AxiosRequestConfig, AxiosResponse } from 'axios';

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

// 创建axios-实例
const requests = axios.create({
    baseURL: import.meta.env.VITE_APP_BASE_URL,
    timeout: 5000,
    headers: {......},
});

// 请求拦截
requests.interceptors.request.use((config) => {

    //开始加载-进度条开始
    nprogress.start();

    return config;
})

// 响应拦截
requests.interceptors.response.use((res) => {
    // 结束加载-进度条结束
    nprogress.done();

    // 请求成功
    return res;
}, (error) => {
    return Promise.reject(error)
})

export default requests;

🍒更改进度的颜色

 进度条有一个默认的颜色，当然我们也可以更改为我们的想要的颜色，具体操作如下：

在 依赖包 node_modules 中找到 nprogress中找到nprogress.css文件

 这样就行啦！！！

🍒简单封装

如果达不到自己的要求还可以自己进行封装

现在我们对NProgress进行一下简单的封装，首先我们在utils目录下创建要给nporgress.ts的文件，然后引入NProgress和CSS样式文件，示例代码如下：

import NProgress from 'nprogress'

import 'nprogress/nprogress.css'

然后我们对进度条进行一些基础配置，示例代码如下：

//全局进度条的配置

NProgress.configure({

  easing: 'ease', // 动画方式

  speed: 1000, // 递增进度条的速度

  showSpinner: false, // 是否显示加载ico

  trickleSpeed: 200, // 自动递增间隔

  minimum: 0.3, // 更改启动时使用的最小百分比

  parent: 'body', //指定进度条的父容器

})

 最后我们封装两个方法，一个是开始方法，一个是结束的方法，示例代码如下：

// 打开进度条

export const start = () => {

  NProgress.start()

}

// 关闭进度条

export const close = () => {

  NProgress.done()

}

 🍒在Vue切换路由时展示进度条

现在我们就来使用我们上面封装的Nprogress，这里我们在VueRouter的配置文件中使用，实现切换路由时在顶部展示进度条，首先我们打开VueRouter的配置文件，然后引入我们封装的Nprogress：

// router/index.ts

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

然后我们在创建的Router实例中使用这两个方法：

const router = createRouter({

  routes,

  history: createWebHistory(),

})

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

  start()

})

router.afterEach(() => {

  close()

})

• beforeEach：路由切换之前触发；

• afterEach：路由切换完成后触发；

现在我们切换路由就可以实现顶部进度条的切换。