Vue开发者福音：NProgress进度条最佳实践，解决页面加载体验痛点

简介

NProgress 是一个轻量级的进度条库，只有 2KB 大小，可以为你的应用添加优雅的页面加载进度条效果。它具有现实的涓流动画，让用户知道页面正在加载，提升用户体验。

特性

轻量级，仅 2KB
简洁美观的进度条样式
高性能，基于 CSS3 动画
易于配置和自定义
响应式设计，支持移动端
零依赖，兼容所有现代浏览器

安装

# npm
npm install nprogress

# yarn
yarn add nprogress

# pnpm
pnpm add nprogress

基础使用

1. 引入样式

// main.js
import { createApp } from "vue";
import App from "./App.vue";
import "nprogress/nprogress.css";

createApp(App).mount("#app");

2. 基本 API 使用

<template>
  <h2 class="text-2xl font-bold text-gray-800 mb-6 text-center">
    NProgress 进度条演示
  </h2>
  <div class="flex gap-4">
    <button
      @click="startProgress"
      class="w-full px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transform transition-all duration-200 hover:scale-105 focus:outline-none focus:ring-4 focus:ring-blue-200 shadow-lg"
    >
      开始进度条
    </button>
    <button
      @click="doneProgress"
      class="w-full px-6 py-3 bg-green-600 hover:bg-green-700 text-white font-medium rounded-lg transform transition-all duration-200 hover:scale-105 focus:outline-none focus:ring-4 focus:ring-green-200 shadow-lg"
    >
      完成进度条
    </button>
    <button
      @click="setProgress"
      class="w-full px-6 py-3 bg-orange-600 hover:bg-orange-700 text-white font-medium rounded-lg transform transition-all duration-200 hover:scale-105 focus:outline-none focus:ring-4 focus:ring-orange-200 shadow-lg"
    >
      设置进度50%
    </button>
    <button
      @click="incrementProgress"
      class="w-full px-6 py-3 bg-purple-600 hover:bg-purple-700 text-white font-medium rounded-lg transform transition-all duration-200 hover:scale-105 focus:outline-none focus:ring-4 focus:ring-purple-200 shadow-lg"
    >
      增加进度
    </button>
  </div>
</template>

<script setup>
import NProgress from "nprogress";

// 开始进度条
const startProgress = () => {
  NProgress.start();
};

// 完成进度条
const doneProgress = () => {
  NProgress.done();
};

// 设置特定进度
const setProgress = () => {
  NProgress.set(0.5); // 设置为50%
};

// 增加进度
const incrementProgress = () => {
  NProgress.inc(); // 随机增加一点进度
};
</script>

配置选项

全局配置

// main.js
import NProgress from "nprogress";

// 配置选项
NProgress.configure({
  // 动画效果的缓动函数，默认为 'ease'
  easing: "ease",

  // 动画速度，默认为 200ms
  speed: 500,

  // 是否显示右上角的加载指示器，默认为 true
  showSpinner: false,

  // 进度条的最小百分比，默认为 0.08
  minimum: 0.1,

  // 进度条的父容器，默认为 'body'
  parent: "#app",

  // 进度条的模板
  template:
    '<div class="bar" role="bar"><div class="peg"></div></div><div class="spinner" role="spinner"><div class="spinner-icon"></div></div>',
});

高级使用

路由守卫中使用

// router/index.js
import { createRouter, createWebHistory } from "vue-router";
import NProgress from "nprogress";
import "nprogress/nprogress.css";

// 配置 NProgress
NProgress.configure({
  showSpinner: false,
  speed: 300,
});

const router = createRouter({
  history: createWebHistory(),
  routes: [
    // 你的路由配置
  ],
});

// 路由前置守卫
router.beforeEach((to, from, next) => {
  NProgress.start();
  next();
});

// 路由后置守卫
router.afterEach(() => {
  NProgress.done();
});

export default router;

HTTP 请求集成

// utils/request.js
import axios from "axios";
import NProgress from "nprogress";

// 创建 axios 实例
const request = axios.create({
  baseURL: "/api",
  timeout: 10000,
});

// 请求拦截器
request.interceptors.request.use(
  (config) => {
    NProgress.start();
    return config;
  },
  (error) => {
    NProgress.done();
    return Promise.reject(error);
  }
);

// 响应拦截器
request.interceptors.response.use(
  (response) => {
    NProgress.done();
    return response;
  },
  (error) => {
    NProgress.done();
    return Promise.reject(error);
  }
);

export default request;

hooks 封装

// composables/useNProgress.js
import { ref, onBeforeUnmount } from "vue";
import NProgress from "nprogress";

export function useNProgress(options = {}) {
  const isLoading = ref(false);

  // 配置 NProgress
  NProgress.configure({
    showSpinner: false,
    speed: 300,
    ...options,
  });

  const start = () => {
    isLoading.value = true;
    NProgress.start();
  };

  const done = () => {
    isLoading.value = false;
    NProgress.done();
  };

  const set = (progress) => {
    NProgress.set(progress);
  };

  const inc = (amount) => {
    NProgress.inc(amount);
  };

  // 组件卸载时确保进度条完成
  onBeforeUnmount(() => {
    if (isLoading.value) {
      NProgress.done();
    }
  });

  return {
    isLoading,
    start,
    done,
    set,
    inc,
  };
}

自定义样式

基础样式定制

/* 自定义进度条颜色 */
#nprogress .bar {
  background: #29d !important;
  height: 3px !important;
}

/* 自定义加载指示器 */
#nprogress .spinner-icon {
  border-top-color: #29d !important;
  border-left-color: #29d !important;
}

/* 进度条发光效果 */
#nprogress .peg {
  box-shadow: 0 0 10px #29d, 0 0 5px #29d !important;
}

/* 隐藏加载指示器 */
#nprogress .spinner {
  display: none !important;
}

主题样式

/* 渐变主题 */
.gradient-theme #nprogress .bar {
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%) !important;
}

/* 暗色主题 */
.dark-theme #nprogress .bar {
  background: #ffffff !important;
}

/* 彩虹主题 */
.rainbow-theme #nprogress .bar {
  background: linear-gradient(
    90deg,
    #ff0000 0%,
    #ff8000 16.66%,
    #ffff00 33.33%,
    #80ff00 50%,
    #00ff80 66.66%,
    #0080ff 83.33%,
    #8000ff 100%
  ) !important;
}

常见问题

进度条不显示

确保正确引入了 CSS 文件：

import "nprogress/nprogress.css";

路由切换时进度条卡住

在路由守卫中正确处理：

router.beforeEach((to, from, next) => {
  NProgress.start();
  next();
});

router.afterEach(() => {
  // 使用 nextTick 确保DOM更新完成
  nextTick(() => {
    NProgress.done();
  });
});

最佳实践

合理配置延迟: 避免短时间请求频繁显示进度条
统一管理: 在应用入口处统一配置和管理
样式一致性: 确保进度条样式与应用主题一致
性能考虑: 避免过于频繁的进度更新
用户体验: 为长时间操作提供更详细的进度信息

总结

NProgress 是一个简单而强大的进度条库，通过合理的配置和使用，可以显著提升应用的用户体验。结合 Vue3 的组合式 API，我们可以创建更加灵活和可复用的进度条解决方案。

原文链接：https://code.ifrontend.net/archives/1311，转载请注明出处。

简介

特性

安装

基础使用

1. 引入样式

2. 基本 API 使用

配置选项

全局配置

高级使用

路由守卫中使用

HTTP 请求集成

hooks 封装

自定义样式

基础样式定制

主题样式

常见问题

进度条不显示

路由切换时进度条卡住

最佳实践

总结

评论0

在线客服

升级VIP

全屏浏览

夜间模式

返回顶部

Vue开发者福音：NProgress进度条最佳实践，解决页面加载体验痛点

简介

特性

安装

基础使用

1. 引入样式

2. 基本 API 使用

配置选项

全局配置

高级使用

路由守卫中使用

HTTP 请求集成

hooks 封装

自定义样式

基础样式定制

主题样式

常见问题

进度条不显示

路由切换时进度条卡住

最佳实践

总结

猜你喜欢

从播放器到编辑器：wavesurfer.js 打造高颜值音频可视化与交互

TresJS v5 震撼发布！让 Vue 开发者轻松玩转 3D 世界

Tweakpane 提速你的图形项目：实时参数调优 + 监控面板全攻略

Reveal.js + Mermaid，图表用写的，比画的更快！

前端大佬都在用的演示神器！Reveal.js API 深度解析，告别枯燥的PPT时代

前端演示提效：Pointer/Chalkboard 让你的 Reveal.js 演示文稿更“会说话”

评论0

在线客服

升级VIP

全屏浏览

夜间模式

返回顶部