简单又快捷的进度条—NProgress库了解一下

推荐一个小而美的进度条库nprogress

1、介绍

• 就是这么一个效果，如下图所示
• 官网、github

效果

2、安装引入

• 安装

$ npm install --save nprogress

• main.js中引入（这里需要注意的是好像文档里使用npm安装的方法没有说要import这个css文件，但是不引入是没效果的）

import NProgress from 'nprogress' 
import 'nprogress/nprogress.css' 

• 然后你还可以进行一下configure的配置，比如隐藏我上图中右上角的loading图标：

NProgress.configure({ showSpinner: false })

3、使用

• 用的话你可以单个页面配置，但是像进度条这种东西，一般都是全局配置即可，所以我写在路由守卫中。

使用方式

4、其他

如何修改进度条的颜色呢？

Just edit nprogress.css to your liking. Tip: you probably only want to find and replace occurrences of #29d.

• 文档说直接改变nprogress.css这个文件即可，这个文件在node_modeules中，所以我们可能需要把这个文件给拿出来，放到我们自己的项目文件中，这样上传git的时候才不会丢失。
• 然后import引入的时候修改下正确的路径。

修改进度条的颜色