vue3中使用NProgress的用法

原创 已于 2023-09-18 10:35:56 修改 · 4.7k 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #vue.js #typescript

于 2023-03-31 11:39:18 首次发布
在Vue3项目中，通过NProgress插件可以实现页面跳转时顶部的进度条效果。安装NProgress及其类型定义，然后在router.beforeEach和afterEach中分别调用start和end方法来控制进度条的显示和结束。此外，可以自定义NProgress的颜色以匹配项目风格。

vue3中使用NProgress的用法

自我记录

跳转页面的时候顶部的进度条实现方式 下面是github地址
https://github.com/rstacruz/nprogress
主要记住两个api就可以简单的使用
开启 NProgress.start()
关闭 NProgress.end()

1.首先安装
Ps:npm 5.0.0 之前，有 --save 参数才会把模块写入到 packages.json。现在已经是内置参数，不用额外写了

npm install nprogress
or
yarn add nprogress
or
pnpm add nprogress

2.使用了ts的小伙伴记得安装ts类型 (项目没有ts的可以跳过)

pnpm add @types/nprogress -D

3.引入并使用 src/router/index.ts

import {
   
    createRouter, createWebHistory } from 'vue-router'
// 引入进
最低0.47元/天 解锁文章
在Vue 3 + TypeScript的项目中使用NProgress进度条
RoGroovy的博客
09-21 494
NProgress是一个轻量级的进度条库，用于在页面加载和数据请求时显示进度条，以提供用户友好的反馈。我们创建了一个进度条组件，然后在需要显示进度条的页面中使用该组件。在上面的代码中，我们导入了NProgress库并在组件的mounted钩子函数中启动进度条，配置了不显示加载图标。在Vue项目中，我们可以创建一个单独的进度条组件，用于显示进度条。然后，我们在组件的components选项中注册了进度条组件。现在我们可以在需要显示进度条的页面中使用我们刚刚创建的进度条组件。步骤三：使用进度条组件。
vue3的NProgress页面加载虚拟进度条
lfYexun的博客
01-30 902
vue3的NProgress页面加载虚拟进度条的使用方法
vue3使用nprogress实现全局loading进度条
samate6666的博客
09-15 2373
使用nprogress快速实现全局loading进度条
Vue3+TypeScript+Element Plus+el-progress 进度条应用示例
最新发布
BillKu的博客
11-09 207
优点：进度显示友好，及时同步后端数据，显示到95后，进度值还会继续递增，使用体检好。缺点：会遇到进度条到达95就一直不动（眼睁睁等待了2分钟），使用体验差。进度到95后，换成后端计算进度，每隔3秒发送请求获取后端数据。进度到95后，换成后端计算进度，每隔3秒发送请求获取后端数据。后端完成工作任务，前端正在接收响应数据进行渲染。优点：无需频繁与后端交互获取进度值。缺点：逻辑实现相对复杂一些。渲染完成，展示最终的数据。
vue3使用nprogress进度条
qq_43600406的博客
05-29 913
这里简单举了例子，其他配置项参考gitHub。看个人需求，非强制性操作。
Vue3集成nprogress（进度条）
qq_63238915的博客
11-06 1639
现在我们切换路由就可以实现顶部进度条的切换。
【Vue.js 3.0】NProgress 进度条
day day up
04-03 995
在 Vue 3 中使用 NProgress，你需要先安装 NProgress，然后在你的 Vue 应用中引入它，并在适当的生命周期钩子或路由守卫中调用它的方法。以下是一个简单的例子来展示如何在 Vue 3 应用中集成 NProgress。
在Vue3中使用NProgress作为顶部进度条
qq_53720223的博客
04-08 484
通常在路由文件中：添加。3.2 路由守卫中使用。3.1 配置和初始化。
在vue项目中使用Nprogress.js进度条的方法
10-18
在引入之后，接下来就可以在Vue组件中使用NProgress.js提供的方法来控制进度条的显示和隐藏了。最基本的方法是`NProgress.start()`和`NProgress.done()`。其中`NProgress.start()`用于开始显示进度条，而`NProgress....
Vue 中的使用 nProgress 教程
qq_46027468的博客
05-30 938
0.nProgress官网：http://ricostacruz.com/nprogress/github：https://github.com/rstacruz/nprogress 1.nProgress 安装 npm install --save nprogress 2.在main.js 中引入nProgress 和 css 样式 //导入进度条插件\js与css import Np...
vue中使用 NProgress 详细配置跟用法
01-08
三、基本使用方法 NProgress.start() — 显示进度条 NProgress.set(0.4) —设置百分比 NProgress.inc() — 增加一点点 NProgress.done() — 完成进度条 四、基本配置 通过 minimum 来修改最小百分比 NProgress....
vue3后台管理 nprogress进度条使用
qq_52099965的博客
11-29 737
vue3后台管理 nprogress进度条使用
Vue3进度条nprogress(手机端、PC端通用)
m0_56164131的博客
07-05 1377
Vue3进度条nprogress是一个用于显示页面加载进度的库。要在Vue3项目中使用nprogress，需要先安装它，然后在你的项目中引入和使用。
NProgress的简单使用
OceanH的博客
05-03 2521
1.安装NProgress NPM npm install --save nprogress Yarn yarn add nprogress 2.引入 可以直接引入js、css或者通过cdn引入 <script src='nprogress.js'></script> <link rel='stylesheet' href='nprogress.css'/> Vue项目中 // 引入NProgress import NProgress from 'nprogress
NProgress的用法
热门推荐
weixin_68067009的博客
05-26 3万+
NProgress的用法讲解
NProgress 的使用
-ELZ-
08-24 1万+
NProgress 的使用 NProgress 是前端轻量级 web 进度条插件 安装 NPM npm install nprogress --save 或 yarn add nprogress CDN https://unpkg.com/nprogress@0.2.0/nprogress.js https://unpkg.com/nprogress@0.2.0/nprogress.css 基本使用 NProgress 一般搭配路由守卫使用 import NProgress from 'npro
Vue3进度条（Progress）
Vue Amazing UI（Vue3 + TypeScript + Vite）组件库唯一开发维护者
04-06 1万+
用于展示当前操作进度的组件，支持：进度条；进度圈；完成进度条/圈；渐变进度条/圈；自定义样式；自定义主题色；自定义边缘形状；自定义文字；总之，功能丰富，简单易用😁😁
vue3 后台管理 nprogress进度条使用
jieweiwujie的博客
02-28 897
在router.beforeEach中加NProgress.start()在router.afterEach中加NProgress.end()3 在main.js引入。
Vue3+TS的项目中使用NProgress进度条
青年码农
09-14 2000
点击上方“青年码农”关注回复“源码”可获取各种资料本文主要介绍如何在 Vue3+TS 的项目中使用 NProgress 进度条，示例代码非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友往下看。介绍NProgress 是一个轻量级的进度条组件，它的原理非常简单，就是页面启动的时候，构建一个方法，创建一个 div，用 fixed 定位，把这个 div 定位在页面最顶部。相信很多小伙伴都...
vue使用nprogress
02-27
### 集成和配置 NProgress #### 安装依赖包 为了在 Vue 项目中使用 `NProgress`，首先需要安装必要的 npm 包。通过命令行工具执行以下指令来安装： ```bash npm install nprogress --save ``` #### 引入并初始化 NProgress 在项目的入口文件 `main.js` 中引入 `NProgress` 插件及其 CSS 文件[^2]。 ```javascript // main.js import NProgress from &#39;nprogress&#39;; import &#39;nprogress/nprogress.css&#39;; // 初始化配置 NProgress.configure({ easing: &#39;ease&#39;, speed: 500, showSpinner: false, }); ``` #### 创建进度管理模块 对于更复杂的场景，在 `src/utils/progress.ts` 下创建一个新的 TypeScript 或 JavaScript 文件用于封装进度条的操作逻辑[^3]。 ```typescript // src/utils/progress.ts import NProgress from &#39;nprogress&#39;; export function startLoading() { NProgress.start(); } export function endLoading() { NProgress.done(); } ``` #### 结合路由守卫控制进度条状态 为了让进度条能够随着页面切换而自动展示与隐藏，可以在应用级别的导航守卫里调用上述定义的方法[^1]。 ```javascript // router/index.js or equivalent file where routes are defined const router = new Router({...}); router.beforeEach((to, from, next) => { // 开始加载前触发 startLoading(); next(); }); router.afterEach(() => { // 页面跳转完成后触发 endLoading(); }); ``` 这样就完成了整个集成过程，当用户浏览不同页面时会看到顶部有平滑过渡的效果提示当前正在载入新内容。
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值