踩坑记22 顶部进度条 基于nprogress的umi-plugin-nprogress-runtime插件 自动监听网络请求 在vue中使用

2021.9.9

坑71（vue、进度条、nprogress、umi-plugin-nprogress-runtime、自动监听网络请求）：目标是在页面加载和网络请求时显示顶部进度条。

踩坑：开始使用了nprogress包，安装 npm install --save nprogress。

安装及使用参考： nprogress的简介及使用教程 - Made with Vuejs  。

官网： NProgress: slim progress bars in JavaScript (ricostacruz.com) 。

但发现nprogress只能在 .js 文件中引入，无法在 .vue 文件中引入。使用不是很方便。于是开始找其他解决方案。

ps：一个小发现。在 .js 中引入nprogress时，可以看到模块位置在C盘下，而不是项目目录下。而项目目录下的nprogress文件和C盘的内容很不一样，例如项目目录下的nprogress文件没有index文件，C盘中的有。这猜测这可能就是无法在.vue中引入的原因。

最终解决方案：使用umi-plugin-nprogress-runtime插件。此插件基于nprogress，可以自由在 .vue / .js 文件中引入调用NProgress。并且可以自动监听浏览器请求执行情况，展示 NProgress 进度条。

github链接： GitHub - imhele/umi-plugin-nprogress: Add a top progress bar to your Umi project.  参考后半'在其他项目中使用'部分（前半是在umi框架中的使用方法）。

其中NProgress的配置参考： GitHub - rstacruz/nprogress: For slim progress bars like on YouTube, Medium, etc

具体步骤：首先安装umi-plugin-nprogress-runtime插件，npm add umi-plugin-nprogress-runtime 。

之后进行全局配置和使用。此处开启了网络请求的自动监听（此时使用axios请求时会自动展示进度条），并在App.vue的路由守卫中使用NProgress。代码如下：

//  main.js

// 引入全局样式，必须，除非全部自己写

import 'nprogress/nprogress.css'

// 从umi-plugin-nprogress-runtime插件中引入NProgress和setupNProgressPluginRuntime，按需

import { NProgress,setupNProgressPluginRuntime } from 'umi-plugin-nprogress-runtime'

// 进行全局配置，按需，此处去掉了进度条右下方的旋转小圆圈

NProgress.configure({ 

    showSpinner: false

});

// 开启网络请求自动监听，请求完成前会显示进度条

setupNProgressPluginRuntime({

    // 配置监听类型，默认都是true

    // XMLHttpRequest: false,

    // fetch: false,

})



//App.vue

<script>

import { useRouter } from 'vue-router'

// 从umi-plugin-nprogress-runtime插件中引入NProgress，按需

import { NProgress } from 'umi-plugin-nprogress-runtime'



export default {

  name: 'App',

  setup(){

    const router=useRouter()



    //  全局前置守卫中，NProgress.start() 开始进度条，进度会随时间随机增长

    router.beforeEach((to,from,next)=>{

      NProgress.start()

      next()

    })



    // 全局后置钩子中，NProgress.done() 跑完进度，结束进度条

    router.afterEach((to, from, failure)=>{

      NProgress.done()

    })



  }

}

</script>

进度条样式更改：参考css文件 nprogress/nprogress.css at master · rstacruz/nprogress · GitHub 修改了进度条颜色。包括整体背景颜色和进度条头部100px的阴影颜色，默认是#29d，蓝色。所以如果仅修改进度条整体背景颜色，进度条头部依然会泛蓝。在App.vue中，设置整体背景颜色#25DA88（绿色），头部阴影颜色#3EAF7C（更深的绿色），代码如下：

/* 整体 */

#nprogress .bar {

  background: #25DA88 !important;

}

/* 进度条头部100px */

#nprogress .peg {

  box-shadow: 0 0 10px #3EAF7C, 0 0 5px #3EAF7C !important;

}

附加1：记一下umi-plugin-nprogress-runtime插件所属框架umi.js。

官网，含文档： UmiJS - 插件化的企业级前端应用框架

github： GitHub - umijs/umi: 🌋 Pluggable enterprise-level react application framework.

附加2：找解决方案时收集的各类进度条。

Nprogress 插件 | VuePress (vuejs.org)   VuePress的@vuepress/plugin-nprogress插件

JavaScript库——pace.js的快速掌握 - 简书 (jianshu.com)

pace.js 自动加载进度条插件的简单使用教程 - imzhi - 博客园 (cnblogs.com)

进度条 - 在线演示 - Layui

dva-loading 实践用法 - 简书 (jianshu.com)

​​​​​​前端轻量级web进度条 – Nprogress & nanobar - 轩枫阁 – 前端开发 | web前端技术博客 (xuanfengge.com)

by 莫得感情踩坑机(限定)