每周一推（npm包）nprogress

前言

为了不让自己的空余时间都浪费掉，打算做一个每周一推的专栏，盘点一些好的插件，分享给大家🎈。

NProgress

大家在查看vue-element-admin或者某些相关文档的时候部分网站都会有浏览器加载进度条，接下来我们就用插件来实现它。👇

用法

• 安装

npm install --save nprogress

• 引用

import NProgress from 'nprogress' // Progress 进度条
import 'nprogress/nprogress.css' // Progress 进度条样式

• 全局引用配置
• main.js

//引入nprogress 进度条插件
import NProgress from 'nprogress'
// 简单配置  进度条,可以不配置：在axios中我们不再做配置，以用来区分。
NProgress.configure({ minimum: 0.01 });
NProgress.configure({ easing: 'ease', speed: 500, showSpinner: false })

API

• 只需调用start()和done()即可控制进度条。

NProgress.start();
NProgress.done();

• 百分比：要设置进度百分比，请调用.set(n)，其中n是介于0-1之间的数字。

NProgress.set(0.0);     // .start()相似
NProgress.set(0.4);
NProgress.set(1.0);     // .done()相似

• 递增：只需使用.inc() 这会以随机数量增加它。这永远不会达到 100%：

 NProgress.inc();

• 设置启动值最小值默认0.08最大1

NProgress.configure({ minimum: 0.8 });

• 设置使用缓动（CSS 缓动字符串）和速度（以毫秒为单位）调整动画设置。（默认值：ease和200）

NProgress.configure({ easing: 'ease', speed: 600 });

• 修改加载条的颜色（只需要全局替换对应的#29d就可以修改相关样式）

应用场景

可以配合请求的拦截器,或者路由的拦截器一起使用,加载loading。

在请求中使用

• api.js

import axios from 'axios'
//引入nprogress 进度条插件
import NProgress from 'nprogress'

// 创建axios实例
const service = axios.create({
    baseURL: process.env.VUE_APP_BASE_API, //URL地址   环境变量文件
    timeout: 5000 ,//超时
})

// 请求拦截器
service.interceptors.request.use(
    config => {
    	// 开启进度条
		NProgress.start();
        return config
    },
    error => {
        return Promise.reject(error)
    }
)

// 响应拦截器
service.interceptors.response.use(
    response =>{
        // 关闭进度条
        NProgress.done()
    	return Promise.reject(response)
    },
    error => {
        // 关闭进度条
        NProgress.done()
        return Promise.reject(error)
    }
)

export default service;

在路由切换中使用

import Vue from 'vue'
import VueRouter from 'vue-router'
import NProgress from 'nprogress'

Vue.use(VueRouter);
export const constRouter = [
    {
        path: '/login',
        component: () => import('@/views/login/Login'),
    },
]
const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: constRouter
})
// 页面路由刚开始切换的时候
router.beforeEach(async (to,from,next) => {
    // 开启进度条
    NProgress.start();
})
// 页面路由切换完毕的时候
router.afterEach(() => {
    // 关闭进度条
    NProgress.done()
})
​
​
export default router

总结

NProgress的使用特别简单，希望大家可以根据需求合理的使用，且不要贪杯哦🎈。

本文正在参加「金石计划」