[Vue 配置] Vite + Vue3 项目配置和使用 NProgress

文章归档:https://www.yuque.com/u27599042/coding_star/mfmsrf9tz98ox3qg

安装

bash 复制代码
pnpm i nprogress

配置 NProgress

其他更多可参考,仓库地址:https://github.com/rstacruz/nprogress

在 src/config/nprogress.js 中进行配置

是否展示右上角圆圈加载动画

javascript 复制代码
NProgress.configure({ 
  showSpinner: false
});

设置样式

src/styles/nprogress.css

css 复制代码
#nprogress .bar {
    /* 自定义进度条颜色 */
    background: #fa2c19 !important;
}

#nprogress .peg {
    /* 自定义进度条阴影颜色 */
    box-shadow: 0 0 10px #fa2c19, 0 0 5px #fa2c19 !important;
}

启动时进度的最小百分比

默认 0.08

javascript 复制代码
NProgress.configure({ 
  minimum: 0.1
});

进度条动画和速度

动画可选值:

  • linear:动画从开始到结束保持相同的速度。
  • ease:默认值,动画有一个缓慢的开始,然后加速,在结束之前又变慢。
  • ease-in:动画有一个缓慢的开始。
  • ease-out:动画有一个缓慢的结束。
  • ease-in-out:动画有一个缓慢的开始和一个缓慢的结束。
  • cubic-bezier(n,n,n,n):在三次贝塞尔(cubic-bezier)函数中定义自己的值。可以是从 0 到 1 之间的数字值。
javascript 复制代码
NProgress.configure({ 
  easing: 'ease', 
  speed: 500
});

关闭自动递增

默认 true

javascript 复制代码
NProgress.configure({ 
  trickle: false
});

进度条递增速度

单位毫秒,多久自动递增一次

javascript 复制代码
NProgress.configure({ 
  trickleSpeed: 200
});

指定父容器

默认 body

javascript 复制代码
NProgress.configure({ 
  parent: '#container'
});

引入

在 main.js 中引入 nprogress 配置和样式

javascript 复制代码
import "nprogress/nprogress.css" // nprogress 样式
import "@/styles/nprogress.css" // 自定义修改 nprogress 
import '@/config/nprogress.js' // nprogress 配置

使用

javascript 复制代码
// 在需要使用的地方导入
import NProgress from 'nprogress'

// 开启进度条
NProgress.start()

// 结束进度条
NProgress.done()

// 设置进度条百分比,n 取值 0 - 1
NProgress.set(n)

// 获取进度条状态
NProgress.status()

// 增加进度条进度,但不会到 100%,n 取值 0 - 1
NProgress.inc(n);

vue router 中使用

javascript 复制代码
// 全局前置守卫
router.beforeEach(async(to, from, next) => {
    // 开启进度条
    NProgress.start();
}

// 全局后置守卫
router.afterEach(() => {
    // 结束进度条
    NProgress.done();
});

axios 中使用

javascript 复制代码
//请求拦截器
instance.interceptors.request.use(
    (config) => {
        // 开启进度条
        NProgress.start();
		    //...
    },
    (error) =>{
        // 结束进度条
        NProgress.done();
		    //...
	}
);

//响应拦截器
instance.interceptors.response.use(
    (response) => {
        //响应成功
        // 结束进度条
        NProgress.done();
        //...
    },
    (error) => {
        // 结束进度条
        NProgress.done();
        //...
    }
);
相关推荐
一ge科研小菜鸡19 分钟前
React前端框架:现代网页开发的基石(附带构建简单任务管理应用案例代码)
前端框架
熊的猫1 小时前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js
瑶琴AI前端1 小时前
uniapp组件实现省市区三级联动选择
java·前端·uni-app
会发光的猪。1 小时前
如何在vscode中安装git详细新手教程
前端·ide·git·vscode
mosen8682 小时前
Uniapp去除顶部导航栏-小程序、H5、APP适用
vue.js·微信小程序·小程序·uni-app·uniapp
别拿曾经看以后~2 小时前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
我要洋人死2 小时前
导航栏及下拉菜单的实现
前端·css·css3
川石课堂软件测试3 小时前
性能测试|docker容器下搭建JMeter+Grafana+Influxdb监控可视化平台
运维·javascript·深度学习·jmeter·docker·容器·grafana
科技探秘人3 小时前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人3 小时前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome