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

最新推荐文章于 2025-02-13 20:14:15 发布
最新推荐文章于 2025-02-13 20:14:15 发布
阅读量880 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： vue3踩坑记 好用的插件 文章标签： vue.js javascript css vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Alloom/article/details/120595525
本文介绍了如何在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中引入的原因。

最终解决方案：使用

最低0.47元/天 解锁文章

200万优质内容无限畅学
umi+react添加顶部进度条
Shaoyouiqng的博客
11-03 869
进度条 之前做vue的，直接用Nprogress，抛出的方法还是比较多的，react需要用顶部进度条，可以用Pace,相比比较简单，而且利于操作 第一步：编写JS 进入Pace源码 把拷贝的代码放到你的目录文件中，我放的是我的util目录（这个没所谓） 第二步：编写less 选择你喜欢的加载动画，点击箭头指向的方向就行，放入progress.less(文件名随便取，引入对了就行) 目录像这样子： 第三步：引入js less // app.ts文件 import Pace from
html 进度条插件,很实用的进度条插件ProgressBar.js
weixin_42321496的博客
06-07 1126
ProgressBar.js配置参数详解1，介绍它是响应式的创建SVG元素的一个插件。不要慌，不懂SVG也没有关系，插件的使用，主要是对配置参数的理解。这是ProgressBar.js的网站，有动效的展示(我截的静态的图。。。)，在如下图所示，右击小铅笔，在新的页面中打开网页，就可以看到小demo的全部代码了。这是官方配置参数的文档，我会在下面的代码中，详解。进度条的效果，常见的就是长条形和圆形。...
推荐优秀开源项目：Umi Plugin NProgress - 页面加载进度条神器
gitblog_00023的博客
04-24 744
推荐优秀开源项目：Umi Plugin NProgress - 页面加载进度条神器 在这个数字化时代，用户体验成为了产品成功的关键因素之一。而Umi Plugin NProgress 是一个专门为基于 Umi.js 构建的前端应用设计的插件，它提供了一个优雅的页面加载进度条，为用户提供更好的交互体验。 项目简介 Umi Plugin NProgress 是一款 Umi 框架的扩展插件，它整合了...
在Vue中使用NProgress监控页面滚动进度
Tangsze的博客
09-24 270
https://blog.csdn.net/qq_22241923/article/details/101211144
nprogress进度条插件使用
陈皮糖的博客
04-07 5953
nprogress 插件是一个适用于ajax 应用的轻量级的进度条插件 使用步骤: 引入js文件和css文件 <link rel='stylesheet' href='nprogress.css'/> <script src='nprogress.js'></script> 使用进度条插件 引入了nprogress.js文件后，就有了一个...
介绍两款js插件，实现网页顶部线性加载进度条
PHP学习与交流
08-17 696
介绍两款js插件，实现网页顶部线性加载进度条
js进度条插件pace.js
06-06 234
主要用到themes文件夹和pace.js文件 转载于:https://www.cnblogs.com/loveMis/p/10985518.html
html5进度条插件
sunqian_happy的博客
12-16 846
(function () {       window.H5ProgressBar = function (obj) {           this.height = obj.height;           this.width = obj.width;           this.speed = obj.speed;          };          //在界面上
插件——nprogress进度条
m0_62276354的博客
09-27 511
nprogress进度条
uni.request如何处理大文件上传？
最新发布
祈澈菇凉
02-13 678
在 Uni-App 中处理大文件上传时，建议使用FormData和方法，以便于发送包含文件和其他数据的请求。
Redux 和 React 的加载条（又名进度条）
06-08
React Redux Loading Bar 一个 React 组件，为长时间运行的任务提供 Loading Bar（又名进度条）。 包括： React 组件——显示加载条并模拟进度 Redux 减速器——管理加载条部分的存储（可选） Redux 中间件——自动显示和隐藏加载条以使用 promise 示例参见演示或其源代码。 安装 npm install --save react-redux-loading-bar 用法 在应用程序的任何位置安装 LoadingBar 组件： import LoadingBar from 'react-redux-loading-bar' export default class Header extends React.Component { render() { return ( ) } } 好消息是它不包含任何定位。 您可以将其附加到任何块或整个页面的顶部。 您甚至可以在同一页面上包含多个加载条，它们将独立呈现。 它们需要配备一个范围，以便您可以独立调整它们。 import LoadingBar from 'react-redux-loadin
【Vue项目美化】NProgress顶部进度条详细配置
Web_chicken的博客
11-03 1653
important;}建议写入中，并在main.js中引入也可直接写在App.vue中。
Vue 进度条安装（nprogress）
T8682828的博客
10-07 1348
Vue 进度条安装（nprogress）
基于umijs/plugin-qiankun 的微前端 配置（vue+umi）
weixin_45701199的博客
04-22 1万+
qiankun + umi 配置
vue项目中使用nprogress进度条
weixin_43915587的博客
07-19 713
安装nprogress: npm install --save nprogress 引入（以router.js为例）： import NProgress from "nprogress"; import "nprogress/nprogress.css"; 全局路由守卫中监听页面的跳转： // 路由守卫 router.beforeEach((to, from, next) => { ...
TypeError: Cannot read properties of undefined (reading ‘dispatch‘)以及一点点的nprogress的错误
dw将限制条件全部检测通过后才能提交表单
11-27 5544
TypeError: Cannot read properties of undefined (reading 'dispatch')以及nprogress的知识
NProgress显示顶部进度条效果及使用详解
热门推荐
@必意玲
12-19 1万+
NProgress实现显示加载进度条效果，具有逼真的动画涓涓细流来说服你的用户，极大提高用户体验效果 1. 官网下载地址：http://ricostacruz.com/nprogress/ 演示效果如下GIF图片所示：（请求的数据比较小，所以跑得比较快，可以Network设置为3G以下网速看得更清晰点） 2. 引入需要的 nprogress.css 和 nprogress.js 文件 &amp;amp;amp;amp;l...
前端开发者必备思维
前端大全
11-17 1197
（给前端大全加星标，提升前端技能）本文来自（作者李峰）的投稿最近公司要招人，本人负责专业前端初面，但是面试过程大部分前端面试者给我的感觉思维比较窄，以及陈述问题时候比较乱...
react学习-Windows下UmiJS框架搭建
qq_42603430的博客
11-25 1364
UmiJS介绍 Umi，中文可发音为乌米，是可扩展的企业级前端应用框架。Umi 以路由为基础的，同时支持配置式路由和约定式路由，保证路由的功能完备，并以此进行功能扩展。然后配以生命周期完善的插件体系，覆盖从源码到构建产物的每个生命周期，支持各种功能扩展和业务需求。 Umi 是蚂蚁金服的底层前端框架，已直接或间接地服务了 3000+ 应用，包括 java、node、H5 无线、离线（Hybrid）应用、纯前端 assets 应用、CMS 应用等。他已经很好地服务了我们的内部用户，同时希望他也能服务好外部用户。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值