前端实在好用的工具类库 【后续持续添加若有请留言添加积累供大家使用】

1、animate.css 【注意引入的版本问题】
使用:第一步. 引入animate.css文件 【cdn引入/npm】 npm install animate.css –save
第二步. 给指定的元素加上指定的动画样式名
官方文档: http://www.animate.net.cn/

vue用法: main.js
import animate from 'animate.css'
Vue.use(animate)

使用:直接添加类【animated 类名】 即可
<div class="animated fadeInUp"></div>

提供类名:
bounce flash pulse rubberBand shake swing tada wobble
bounceIn bounceInDown bounceInLeft bounceInRight bounceInUp
bounceOut bounceOutDown bounceOutLeft bounceOutRight bounceOutUp
fadeIn fadeInDown fadeInDownBig fadeInLeft fadeInLeftBig fadeInRight fadeInRightBig fadeInUp fadeInUpBig
fadeOut fadeOutDown fadeOutDownBig fadeOutLeft fadeOutLeftBig fadeOutRight fadeOutRightBig fadeOutUp fadeOutUpBig
flip flipInX flipInY flipOutX flipOutY
lightSpeedIn lightSpeedOut
rotateIn rotateInDownLeft rotateInDownRight rotateInUpLeft rotateInUpRight
rotateOut rotateOutDownLeft rotateOutDownRight rotateOutUpLeft rotateOutUpRight
slideInDown slideInLeft slideInRight slideOutLeft slideOutRight slideOutUp
hinge rollIn rollOut

2、CanIUse 查看各大浏览器对某个特性的支持程度
官方文档:https://caniuse.com/

3、Code Sandbox 在线代码编辑器
官方文档:https://codesandbox.io/

4、normalize.css 【Normalize.css是一种CSS reset 的替代方案。它在默认的HTML元素样式上提供了跨浏览器的高度一致性】
使用:第一步. 引入normalize.css文件 【cdn引入/npm】 npm install --save normalize.css
官方文档:https://github.com/necolas/normalize.css/

5、CDN 常用CDN地址
官方地址:https://cdnjs.com
官方地址:http://www.bootcdn.cn
官方地址:http://unpkg.com

6、clipboardjs 一种将文本复制到剪贴板的现代方法
官方文档:https://clipboardjs.com

7、lodashjs 【Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库】
官方文档:https://www.lodashjs.com/
GitHub: https://github.com/lodash/lodash

8. vconsole 【移动端调试神器】
npm文档:https://www.npmjs.com/package/vconsole

9、tinypng 【图片无损压缩】
在线网站:https://tinypng.com/

10. BetterScroll 2.0 【BetterScroll 是一款重点解决移动端(已支持 PC)各种滚动场景需求的插件】
官方文档:https://better-scroll.github.io/docs/zh-CN/guide/

11.在线数据接口模拟测试
官方文档:http://jsonplaceholder.typicode.com/

posted @ 2021-04-30 17:19  蓝色帅-橙子哥  阅读(159)  评论(0编辑  收藏  举报