详解如何在Vue3+TS的项目中使用NProgress进度条

目录
  • 写在前面
  • 在项目中安装
  • 简单的封装
  • 在Vue切换路由时展示进度条

写在前面

NProgress是一个轻量级的进度条组件，在Github上已经2.4万star数了，虽然这个组件已经好久没有更新了，最近一次更新是20年4月份，改了jQuery的版本，但是该组件的使用频率还是高的。

在项目中安装

这里的包管理工具使用的npm，如果你使用的是yarn或者pnpm，请自行更改安装命令，安装命令如下：

npm i nprogress -S

因为我们是TS的项目，还需要安装其类型声明文件，命令如下：

npm i @types/nprogress -D

简单的封装

现在我们对NProgress进行一下简单的封装，首先我们在utils目录下创建要给nporgress.ts的文件，然后引入NProgress和CSS样式文件，示例代码如下：

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

然后我们对进度条进行一些基础配置，示例代码如下：

//全局进度条的配置
NProgress.configure({
  easing: 'ease', // 动画方式
  speed: 1000, // 递增进度条的速度
  showSpinner: false, // 是否显示加载ico
  trickleSpeed: 200, // 自动递增间隔
  minimum: 0.3, // 更改启动时使用的最小百分比
  parent: 'body', //指定进度条的父容器
})

最后我们封装两个方法，一个是开始方法，一个是结束的方法，示例代码如下：

// 打开进度条
export const start = () => {
  NProgress.start()
}

// 关闭进度条
export const close = () => {
  NProgress.done()
}

在Vue切换路由时展示进度条

现在我们就来使用我们上面封装的Nprogress，这里我们在VueRouter的配置文件中使用，实现切换路由时在顶部展示进度条，首先我们打开VueRouter的配置文件，然后引入我们封装的Nprogress：

// router/index.ts

import { close, start } from '/@/utils/nprogress'

然后我们在创建的Router实例中使用这两个方法：

const router = createRouter({
  routes,
  history: createWebHistory(),
})

router.beforeEach((pre, next) => {
  start()
})

router.afterEach(() => {
  close()
})
  • beforeEach：路由切换之前触发；
  • afterEach：路由切换完成后触发；

现在我们切换路由就可以实现顶部进度条的切换。

到此这篇关于详解如何在Vue3+TS的项目中使用NProgress进度条的文章就介绍到这了,更多相关Vue3  NProgress进度条内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue Nprogress进度条功能实现常见问题

    vue Nprogress进度条功能实现常见问题

    NProgress是页面跳转是出现在浏览器顶部的进度条 官网:http://ricostacruz.com/nprogress/ github:https://github.com/rstacruz/nprogress 下图中的这种顶部进度条是非常常见的,在vue项目中有对应的插件.Nprogress Nprogress进度条的使用方法如下: 1.安装nprogress插件 npm install --save nprogress 注意此处的--save等同于-s,就是将插件的名称及版本号保存到

  • Vue使用NProgress进度条的方法

    本文实例为大家分享了Vue使用NProgress进度条的具体代码,供大家参考,具体内容如下 1.安装 npm i -S nprogress 2.在router.js中使用 import Vue from 'vue' import Router from 'vue-router' import NProgress from 'nprogress' import 'nprogress/nprogress.css' Vue.use(Router) const router = new Router({

  • 在vue项目中使用Nprogress.js进度条的方法

    NProgress.js提供页面加载进度条效果,当页面打开加载时,在页面顶部会出现进度条加载动画.NProgress.js是轻量级的进度条组件,使用简便,可以很方便集成到单页面应用中. Ajaxyy应用程序的细长进度条.灵感来自Google,YouTube和Medium. 在vue中使用nprogress.js 安装 $ bower install --save nprogress $ npm install --save nprogress 在项目中引入 在main.js中引入要使用的npro

  • vue使用nprogress加载路由进度条的方法

    1.效果图 2.安装 npm install --save nprogress 基本用法 NProgress.start(); NProgress.done(); 3.在路由中使用 import NProgress from 'nprogress' import 'nprogress/nprogress.css' router.beforeEach((to, from, next) => { NProgress.start(); next(); }); router.afterEach(() =

  • Vue中nprogress页面加载进度条的方法实现

    nprogress页面加载进度条 前言 很多时候在访问网页的时候我们总是看到页面在加载中,可以却不知道要加载多久,无期限的等待总是让人烦躁不安,所以我们希望能知道网页加载的进度,这样我们就能做到心中有数是否继续等待页面加载.这个功能我们可以依靠nprogress来实现,它是轻量级的进度条组件,使用简便,可以很方便集成到应用中来. 安装nprogress 直接在项目中执行安装命令:npm install --save nprogress nprogress方法 NProgress.start()

  • vue使用nprogress实现进度条

    本文实例为大家分享了vue使用nprogress进度条展示的具体代码,供大家参考,具体内容如下 安装 npm i nprogress -S 使用 在main.js中 import NProgress from 'nprogress' import 'nprogress/nprogress.css' //使用钩子函数对路由进行权限跳转 router.beforeEach((to, from, next) => { const role = localStorage.getItem('ms_user

  • vue配置nprogress实现页面顶部进度条

    vue配置nprogress实现页面顶部进度条

    本文实例为大家分享了vue配置nprogress实现页面顶部进度条的具体代码,供大家参考,具体内容如下 1. 安装 npm install nprogress --save 2. 在main.js中导入 源码~~~~~~方便你复制 // The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an a

  • 详解如何在Vue3+TS的项目中使用NProgress进度条

    目录 写在前面 在项目中安装 简单的封装 在Vue切换路由时展示进度条 写在前面 NProgress是一个轻量级的进度条组件,在Github上已经2.4万star数了,虽然这个组件已经好久没有更新了,最近一次更新是20年4月份,改了jQuery的版本,但是该组件的使用频率还是高的. 在项目中安装 这里的包管理工具使用的npm,如果你使用的是yarn或者pnpm,请自行更改安装命令,安装命令如下: npm i nprogress -S 因为我们是TS的项目,还需要安装其类型声明文件,命令如下: n

  • 详解如何在vue+element-ui的项目中封装dialog组件

    1.问题起源 由于 Vue 基于组件化的设计,得益于这个思想,我们在 Vue 的项目中可以通过封装组件提高代码的复用性.根据我目前的使用心得,知道 Vue 拆分组件至少有两个优点: 1.代码复用. 2.代码拆分 在基于 element-ui 开发的项目中,可能我们要写出一个类似的调度弹窗功能,很容易编写出以下代码: <template> <div> <el-dialog :visible.sync="cnMapVisible">我是中国地图的弹窗&l

  • 详解如何在Vue3使用＜script lang=“ts“ setup＞语法糖

    目录 迁移组件 隐式返回 defineProps defineEmits 默认关闭和defineExpose Vue 3.2 引入了语法,这是一种稍微不那么冗长的声明组件的方式.您可以通过向 SFC 的元素添加属性来启用它,然后可以删除组件中的一些样板.script setupsetupscript 让我们举一个实际的例子,并将其迁移到这个语法! 迁移组件 以下组件有两个道具(要显示的和一个标志).基于这两个道具,计算模板中显示的小马图像的URL(通过另一个组件).该组件还会在用户单击它时发出一

  • 图文详解如何在vue3+vite项目中使用svg

    图文详解如何在vue3+vite项目中使用svg

    今天在vue3+vite项目练习中,在使用svg时,发现之前的写法不能用,之前的使用方法参考vue2中优雅的使用svg const req = require.context('./icons/svg', false, /\.svg$/) const requireAll = requireContent => requireContent.keys().map(requireContent) requireAll(req) 然后就各种资料查找,终于实现了,废话不多说,直接上代码: stept1

  • 详解如何优雅地在React项目中使用Redux

    前言 或许你当前的项目还没有到应用Redux的程度,但提前了解一下也没有坏处,本文不会安利大家使用Redux 概念 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与React没有任何关系,其他UI框架也可以使用Redux react-redux React插件,作用:方便在React项目中使用Redux react-thunk 中间件,作用:支持异步action 目录结构 Tips:与Redux无关的目录已省略 |--src |-- store Redux目录

  • 详解如何使用webpack在vue项目中写jsx语法

    本文介绍了如何使用webpack在vue项目中写jsx语法,分享给大家,具体如下: 我们知道Vue 2.0中对虚拟DOM的支持.我们可以通过JavaScript动态的创建元素,而不用在template中写HTML代码.虚拟DOM最终将被渲染为真正的DOM. data: { msg: 'Hello world' }, render (h) { return h( 'div', { attrs: { id: 'my-id' }, [ this.msg ] ); } 渲染后的内容为: <div id=

  • 详解如何在Node.js的httpServer中接收前端发送的arraybuffer数据

    最近使用了protobuf进行数据交互,发送在node.js接收前端的二进制数据出现了数据错误等问题.后来发现思路上面的问题,在req.on('data',()=>{})事件中的处理不适当才引发数据错乱.借此发 我先直接贴正确接收二进制数据代码 const server = http.createServer((req, res) => { if(req.method==='OPTIONS'){ res.setHeader("Access-Control-Allow-Origin&q

  • 详解如何在code block创建一个C语言的项目

    详解如何在code block创建一个C语言的项目

    有两种方法创建一个项目 1.在开始 界面 2.在菜单栏创建 接下来就是新建项目的步骤啦 1.在点了create 之后弹出来的窗口中 2.接下来就是c还是c++的问题 其实c和c++语法基本互通的(毕竟C++要兼容C),只是生成的后缀名不一样.anyway,如果是看的C语言语法书的话,还是选择C吧(其实C++中可以用到C语法,只是头文件要自己加,C就C吧) 3.填 写项目的基本资料 4. 5. 6.字好小怎么办?? 按照ctrl+鼠标向上滑轮(或者+号)(是小数字键盘上的+哦) 7. 那么这两个绿

  • 详解如何在SpringBoot项目中使用全局异常处理

    详解如何在SpringBoot项目中使用全局异常处理

    目录 1. 创建自定义异常 2.创建全局异常处理器 3.创建测试控制器 在完整的项目开发中,异常的出现几乎是无法避免的:如果凡是有可能出现异常的地方,我们都手动的使用try-catch将其捕获的话,虽然也能达到处理异常的效果,但是这样做会使得代码显得十分臃肿并且后期不好维护,也不利于多人系统开发. 在Spring Boot中提供了统一处理异常的方法,SpringBoot中有一个ControllerAdvice的注解,使用该注解表示开启了全局异常的捕获,我们只需在自定义一个方法使用Exceptio

  • 详解如何在SpringBoot项目中使用统一返回结果

    详解如何在SpringBoot项目中使用统一返回结果

    目录 1.创建Spring Boot项目 2.返回结果的封装 3.后端接口实现 3.1 创建实体类 3.2 创建dao层 3.3 创建Controller层 4.前端部分 5.验证 在一个完整的项目中,如果每一个控制器的方法都返回不同的结果,那么对项目的维护和扩展都会很麻烦:并且现在主流的开发模式时前后端分离的模式,如果后端返回各式各样的结果,那么在前后端联调时会非常的麻烦,还会增加前后端的格外任务. 所以,在一个项目中统一返回结果就是一个十分必要和友好的做法.接下来就用一个简单的demo来看看

随机推荐