VUE项目--nprogress进度条

安装

npm install --save nprogress

引入

在src/api/requests.js文件中引入

// 引入进度条
import nprogress from 'nprogress'
// 引入进度条的样式
import 'nprogress/nprogress.css'

基本用法

nprogress.start(); //开始
nprogress.done(); //结束

在requests.js中–——在请求拦截器和响应拦截器中使用：

// 请求拦截器：在发送请求之前，请求拦截器可以检测到，在请求发送之前处理一些事情
requests.interceptors.request.use((config) => {// config: 是配置对象，该对象包含一个属性-->headers请求头// 进度条开始nprogress.start()return config
})
// 响应拦截器：
requests.interceptors.response.use((res) => {// 成功的回调函数// 进度条结束nprogress.done()return res.data
}, (error) => {// 失败的回调函数return Promise.reject(new Error('faile'))
})

VUE项目--nprogress进度条相关推荐

Vue使用NProgress进度条 zindex
1.安装 npm i -S nprogress 2.在router.js中使用 import Vue from 'vue' import Router from 'vue-router' import ...
vue——Nprogress进度条功能实现
下图中的这种顶部进度条是非常常见的,在vue项目中有对应的插件.Nprogress Nprogress进度条的使用方法如下: 1.安装nprogress插件 npm install --save np ...
NProgress 进度条
NProgress 实现进度条 NProgress 是浏览器加载时,出现在浏览器顶部的进度条. 参考文章@小丶侯参考文章@CEZLZ 一.安装 npm install --save nprogres ...
vue 视频时间进度条组件
vue 视频时间进度条组件有些视频是以视频流的形式进行渲染的,没有视频滚动条,所以就写了24h的时间组件实现思路: 1,24h的时间刻度线总宽度为12960px 2,点击24h线的某一点,获取这 ...
vue 视频时间进度条组件-使用npm组件
vue 视频时间进度条组件有些视频是以视频流的形式进行渲染的,没有视频滚动条,所以就写了24h的时间组件组件已上传到npm上,npm i as-time-line下载安装即可,最少需要1.2.0 ...
nprogress进度条的使用
nprogress进度条的使用文章目录一.安装所需的包二.使用步骤 1.引入 2.使用 3.修改样式总结一.安装所需的包在项目文件打开终端 npm i nprogress --save 二 ...
vue nprogress进度条插件介绍
实现效果如下: 安装: npm install –save nprogress 用法: //vue中引用 import NProgress from 'nprogress' import 'nprog ...
Vue.js中使用nprogress进度条
安装 npm install --save nprogress 简单使用 router目录下,index.js 引入 import NProgress from 'nprogress' import ...
Vue给项目添加进度条
前言在PC端项目的开发过程中,有时我们需要给项目添加一个进度条来展示界面是否已经完成加载的情况.那么如何才能成功添加进度条呢? 添加方式用法1: 在拦截器中使用 1.引入插件Nprogress n ...

VUE项目--nprogress进度条

安装

引入

基本用法

VUE项目--nprogress进度条相关推荐

最新文章

热门文章