pace.js不支持npm, 所以只能直接下载下来，当作普通js引入

我在用的时候怎么都引不到组件里去用

后来终于找到方法了，直接上图了

1.先将pace文件下载来放在公共js目录下，pace.less是用来放加载样式的，也是放在公共less下，一般会把pace目录下的theme和template文件删除，把需要用到的样式直接中theme文件中复制粘贴过来

这样比直接去theme目录引要好的多，因为往往你会修改一下样式

2.在webpack里配置一下路径，如果没有这步操作，在构建的时候会报错

3.引用pace， 一般在一个页面的根组件上引用，在componentDidMount()的时候pace.start()就可以啦

react中用pace.js的更多相关文章

  1. 使用React、Node.js、MongoDB、Socket.IO开发一个角色投票应用的学习过程（三）

    这几篇都是我原来首发在 segmentfault 上的地址:https://segmentfault.com/a/1190000005040834 突然想起来我这个博客冷落了好多年了,也该更新一下,呵 ...

  2. Pace.js – 超赞的页面加载进度自动指示和 Ajax 导航效果

    在页面中引入 Pace.js  和您所选择主题的 CSS 文件,就可以让你的页面拥有漂亮的加载进度和 Ajax 导航效果.不需要挂接到任何代码,自动检测进展.您可以选择颜色和多种效果,有简约,闪光灯, ...

  3. pace.js和NProgress.js两个加载进度插件的一点小总结

    这两个插件都是关于加载进度动画的,应该说各有特点吧,最起码对我来说是各有优势的.今天一天就捣鼓了加载进度动画,也研究了大量的(也就这两个)加载进度动画,也算对加载进度动画有了一个初步的了解了吧. NP ...

  4. pace.js – 加载进度条插件

    这儿只是简单介绍一下这个插件pace.js. 在页面中引入Pace.js,页面就会自动监测你的请求(包括Ajax请求),在事件循环滞后,会在页面记录加载的状态以及进度情况.此插件的兼容性很好,可以兼容 ...

  5. 插件二之页面加载进度条pace.js

    关于pace.js pace.js包含14样式,每种样式可以自定义颜色,官方下载中提供了几种颜色的主题,使用方式也很简单,引入pace的js文件跟所需样式文件即可 <link rel=" ...

  6. pace.js原理简介

    简介: 不少童鞋可能都使用过pace.js:http://github.hubspot.com/pace/docs/welcome/ 只要在页面上引入pace.js和相关的css,并不需要对业务逻辑做 ...

  7. 手把手教你webpack、react和node.js环境配置（上篇）

    很多人刚学习react的时候,往往因为繁琐的配置而头疼,这里我将手把手教大家怎么用webpack配置react和redux的环境,这篇教程包括前端react和后台node整个网站的环境配置,对node ...

  8. 手把手教你webpack、react和node.js环境配置（下篇）

    上篇我介绍了前端下webpack和react.redux等环境的配置,这篇将继续重点介绍后台node.js的配置. 这里是上篇链接:手把手教你webpack.react和node.js环境配置(上篇) ...

  9. js模拟浏览器加载效果 pace.js 中文官方文档

    2017年2月20日12:11:25 官网URL:http://github.hubspot.com/pace/docs/welcome/ 文档 http://github.hubspot.com/p ...

随机推荐

  1. 《剑指offer》第五十三题（数字在排序数组中出现的次数）

    // 面试题53(一):数字在排序数组中出现的次数 // 题目:统计一个数字在排序数组中出现的次数.例如输入排序数组{1, 2, 3, 3, // 3, 3, 4, 5}和数字3,由于3在这个数组中出 ...

  2. 全排列问题Ⅰ（Java实现）

    给定一个没有重复数字的序列,返回其所有可能的全排列. 示例: 输入: [1,2,3] 输出: [ [1,2,3], [1,3,2], [2,1,3], [2,3,1], [3,1,2], [3,2,1 ...

  3. iterm2 + zsh + oh-my-zsh +autojump

    iterm2  + zsh  +  oh-my-zsh +autojump 升级你的命令行工具,这个我折腾了好久,才明白了各个之间的关系. 1.先下载一个item2 首先你需要下一个iterm2,不要 ...

  4. (8)进程---Queue队列

    # IPC Inter-Process Communication # 实现进程之间通信的两种机制: # 管道 Pipe 用的很少 # 队列 Queue 队列的特征:现进先出,栈属于后进后出 基本语法 ...

  5. VMware vSphere client 中英文语言界面设置

    安装的时候可以选择简体中文,然后安装后,对vsphere client的执行程序制作快捷方式 以win7 x64环境默认路径为例 英文启动如下: "C:Program Files (x86) ...

  6. spring cloud: Hystrix（五）：如禁止单个FeignClient使用hystrix

    spring cloud: Hystrix(五):如禁止单个FeignClient使用hystrix 首先application.yml / applicatoin.propreties的配置项:fe ...

  7. vue组件，axios ,路由

    组件(Component)自定义封装的功能. 把一个功能相关的[HTML.css和javascript]代码封装在一起组成一个整体的代码块封装模式,我们称之为“组件”. 组件就是一个html网页中的功 ...

  8. 正睿 2018 提高组十连测 Day4 T3 碳

    记'1'为+1,'0'为-1; 可以发现 pre[i],suf[i]分别为前/后缀和 a[i]=max(pre[l.....i]); b[i]=max(suf[i+1....r]); ans=max( ...

  9. 1.1 从UNIX到Linux的发展历程

    MIT的CTSS:第一个分时操作系统 ◼ Multics系统(Multiplexed Information and Computing System) ⚫ 1965年AT&T,MIT和GE的 ...

  10. 第一阶段——站立会议总结DAY05

    1.昨天做了什么:昨天在个人中心页面上又进行了加工,排版更加规则. 2.今天准备做什么:准备继续学习从网上下载的资料. 3.遇到的困难:界面只能是简陋的,不知道如何办到像微信那样的好看.