Vue 3 配置 NProgress 进度条需四步闭环：安装与类型支持、封装 progress.ts 工具模块、在路由守卫中联动、进阶适配 Axios 请求拦截器，确保可复用、可配置、易维护。
Vue 3 项目初始化阶段配置 NProgress 进度条，核心是「安装 → 样式引入 → 全局配置 → 路由联动」四步闭环。不建议在 main.ts 中零散写 start/done，应封装可复用、可配置、易维护的逻辑。
安装与类型支持
使用 pnpm（推荐）或 npm 安装库及类型定义：
- pnpm add nprogress
- pnpm add -D @types/nprogress
若使用 TypeScript 且遇到 export = 类型报错（如 ts1259），需在 src/env.d.ts 中补充声明：
declare module 'nprogress';
封装进度条工具模块
在 src/utils/progress.ts 中统一管理：
- 导入 NProgress 及 CSS 样式
- 调用
NProgress.configure()设置关键参数：关闭 spinner、调整最小初始值、指定父容器、优化动画节奏 - 导出
start()和done()方法，便于后续在路由和请求拦截器中复用
示例配置：
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';
NProgress.configure({
minimum: 0.3,
easing: 'ease',
speed: 500,
showSpinner: false,
trickleSpeed: 200,
parent: 'body'
});
export const start = () => NProgress.start();
export const done = () => NProgress.done();
在路由守卫中启用
在 src/router/index.ts 中导入并使用封装的方法：
-
router.beforeEach(() => start())—— 页面跳转开始时触发 -
router.afterEach(() => done())—— 页面渲染完成、DOM 更新后关闭 - 注意：无需传参，也不依赖 to/from，避免因守卫中断（如重定向、权限校验）导致进度条卡住
若需排除某些路径（如登录页、静态页），可在 beforeEach 中加判断逻辑，调用 NProgress.remove() 清除残留状态。
进阶：适配请求加载场景
仅路由守卫不够覆盖全部等待场景。建议同步接入 Axios 请求拦截器：
- 请求发出前调用
start() - 响应返回（无论成功失败）后统一调用
done() - 为防重复触发，可加简易节流：例如记录 loading 状态，仅在无活跃请求时才 start；done 后延迟 100ms 再隐藏，确保视觉收尾自然
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
