本文介绍了如何在Vue项目中使用umi-plugin-nprogress-runtime插件，实现在页面加载和网络请求时显示顶部进度条。通过配置NProgress，禁用旋转小圆圈，并在路由守卫中控制进度条的开始和结束，实现了自动监听网络请求的进度显示。同时，文章还展示了如何自定义进度条的颜色，并提供了相关进度条插件的参考资料。
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中引入的原因。
最终解决方案：使用
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
