踩坑记22 顶部进度条 基于nprogress的umi-plugin-nprogress-runtime插件 自动监听网络请求 在vue中使用

本文介绍了如何在Vue项目中使用umi-plugin-nprogress-runtime插件,实现在页面加载和网络请求时显示顶部进度条。通过配置NProgress,禁用旋转小圆圈,并在路由守卫中控制进度条的开始和结束,实现了自动监听网络请求的进度显示。同时,文章还展示了如何自定义进度条的颜色,并提供了相关进度条插件的参考资料。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

2021.9.9

坑71(vue、进度条、nprogress、umi-plugin-nprogress-runtime、自动监听网络请求):目标是在页面加载和网络请求时显示顶部进度条。

踩坑:开始使用了nprogress包,安装 npm install --save nprogress

安装及使用参考: nprogress的简介及使用教程 - Made with Vuejs  。

官网: NProgress: slim progress bars in JavaScript (ricostacruz.com) 。

但发现nprogress只能在 .js 文件中引入,无法在 .vue 文件中引入。使用不是很方便。于是开始找其他解决方案。

ps:一个小发现。在 .js 中引入nprogress时,可以看到模块位置在C盘下,而不是项目目录下。而项目目录下的nprogress文件和C盘的内容很不一样,例如项目目录下的nprogress文件没有index文件,C盘中的有。这猜测这可能就是无法在.vue中引入的原因。

最终解决方案:使用

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值