第一步：在项目总文件下安装

yarn add nprogress

第二步：配置 nprogress

        在/script/utils路径下新建nprogress.ts文件

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

//全局进度条的配置
NProgress.configure({ 
    easing: 'ease',  // 动画方式    
    speed: 1000,  // 递增进度条的速度    
    showSpinner: false, // 是否显示加载ico    
    trickleSpeed: 200, // 自动递增间隔    
    minimum: 0.3 // 初始化时的最小百分比
})

// 打开进度条
export const start = ()=>{
    NProgress.start()
}

// 关闭进度条
export const close = ()=>{
    NProgress.done()
}

 

第三步：在main.ts中引入 并解构

import { start, close } from "./script/utils/nprogress";

第四步：在路由守卫中使用

router.beforeEach((to, from, next) => {
    start();
}

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

第五步：App.vue中更改进度条颜色：

#nprogress .bar {
  background: var(--theme-color) !important; //自定义颜色
}

更改颜色后会发现进度条头部还存在默认颜色的阴影，用以下代码进行更改

#nprogress .peg {
  box-shadow: 0 0 10px red, 0 0 5px red !important;
}

第六步：附API文档