《吐血整理》系列大厂前端组件库工具集合（PC端、移动端、JS、CSS等）

时间 2020-04-05

标签吐血整理系列大厂前端组件工具集合移动 css 栏目快乐工作繁體版

原文原文链接

前言

Coding 应当是一辈子的事业，而不只仅是 30 岁的青春🍚
本文已收录 Github https://github.com/ponkans/F2E，欢迎 Star，持续更新javascript

上一篇《吐血整理》系列大厂前端必备工具集合（抓包、调试、Mock 数据等等）发布以后，不少小伙伴问怪怪有没有大厂前端开发工具组件库的集合，今天，它来了，它踏着七彩祥云来了！！！css

企业级中后台

Ant Design

官网地址：ant.design/index-cn

蚂蚁金服开源 React 组件库首选，企业级中后台就直接用它就完事儿，准没错~
组件很齐全，开发起来简直神速~html

估计已是不少公司的标配了，咱们公司也用~前端

飞冰

官网地址：ice.work/

可视化快速搭建企业级中后台前端应用，仍是很值得试一试滴~vue

Ant Design Vue

官网地址：www.antdv.com/docs/vue/in…

若是大家公司技术栈是 Vue.js，用这个就完事儿了~ java

虽然有 Element UI，以及一些其它的组件库，但挂怪仍是推荐这个~node

跨端框架

Taro

官网地址：nervjs.github.io/taro/

React 开发方式的跨端开发框架，目前已支持，微信/百度/字节跳动/支付宝/QQ 小程序、快应用、H五、React Native 等多端的应用。ios

怪怪一直都以为，前端侧原本就不该该分这么多端，多端统一是大趋势~git

怪怪好几个朋友的公司都在用这个了😝~程序员

Taro UI

官网地址：taro-ui.jd.com/

基于上面 Taro 跨端框架开发的多端 UI 组件库，不得不说，京东仍是考虑得周到，点赞！

使用 Taro，就能够实现全站技术栈统一了😝~

uni-app

官网地址：uniapp.dcloud.io/

Vue.js 开发方式的跨端开发框架，有多强大，去用用就知道啦~

最近这玩意儿好像有点火~

数据可视化

AntV

官网地址：antv.gitee.io/zh#products

数据可视化中的王者，别犹豫了，用它就对了~

pc 端，移动端都给你考虑到了~

图片处理

Image Cropper

官网地址：elemefe.github.io/image-cropp…

给图片显示一个裁剪框，裁剪框容许用户调整大小和位置，经常使用来作用户自定义头像的裁剪功能。

其实就是一个图片裁剪工具啦😝~

img-2

官网地址：github.com/RevillWeb/i…

使用 web worker 作的图片懒加载~

不过针对本身的公司，怪怪建议像懒加载、预加载这种东西，仍是本身作一套比较好哦~

Fabric.js

官网地址：fabricjs.com/

有时候会碰到图片合成类的需求，这个库是基于 canvas 开发滴，支持拖拽，有相似需求的小伙伴能够试试~

nsfwjs

官网地址：github.com/infinitered…

这个库就有点东西了，鉴定图片是否符合要求，这个我没用过，不过感受会有点用~

像这种不符合要求的图片过滤，真正企业里面，都是风控团队来处理滴，不须要咱们前端来搞~

Squoosh

官网地址：squoosh.app/

谷歌在线图片压缩，怪怪常常用~

不过真正项目里面，公司前端基建小分队通常都会封装一套图片压缩类的组件~

SpriteJS

官网地址：spritejs.org/#/

360 团队开发的，高性能图形系统，它可以支持 web、node、桌面应用和小程序的图形绘制和实现各类动画效果，对 360 的东西仍是挺有好感，齐舞周刊有点东西~

UI 样式

imgcook

官网地址：imgcook.taobao.org/docs

很大程度上减轻了前端的工做量！！！，支持 Sketch、PSD、静态图片直接转 code，也就是你们常说的 ui2code。能够直接转成代码！！😝

没用过的小伙伴，必定要去试试！！！

animate.css

官网地址：github.com/daneden/ani…

这大概是最全的 css 动画库了~

direction-reveal

官网地址：nigelotoole.github.io/direction-r…

根据鼠标进入位置，展示从不一样方向展示 hover 效果，pc 端仍是会遇到这样的需求。

支持不少种效果，基本上包含了平常全部的状况~

lax.js

官网地址：github.com/alexfoxy/la…

上面的动画库，配上这个滚动特效库，简直完美

压缩完只有 2kb，很轻量

purifycss

官网地址：github.com/purifycss/p…

能够帮助你移除没使用到的 css，也算是一个小优化点~

Vue.js

vue-virtual-scroller

官网地址：github.com/Akryum/vue-…

基于 vue 的虚拟列表无限滚动，性能还不错~

怪怪公司基建小分队本身作了一套无限滚动加载滴，没用这个~

Vue.Draggable

官网地址：github.com/SortableJS/…

之前怪怪实习的时候，就遇到了运营须要对后台一些元素进行拖拽的场景，就是用的这个~

JavaScript

eslint

官网地址：github.com/eslint/esli…

这玩意的出现解决了大部分强迫症程序员的问题，统一 JavaScript 代码风格

这不用犹豫，公司的代码规范必须统一啊~

JavaScript Obfuscator Tool

官网地址：obfuscator.io/

JavaScript 代码混淆工具，该混淆时就混淆~

lodash

官网地址：lodash.com/

lodash 是一套工具库，内部封装了字符串、数组、对象等常见数据类型的处理函数。

很实用，用过你就知道了~

jlb-tools

官网地址：jielibang.github.io/jtools/inde…

前端 js 工具库: 封装经常使用的工具函数，如日期格式化、浏览器判断等，提升开发效率

若是是本身的公司，这种东西必定要有一套封装到脚手架里面，对于开发很省事儿~

jscodeshift

官网地址：github.com/facebook/js…

将 js 内容解析成 AST 语法树，而后提供一些便利的操做接口，方便咱们对各个节点进行更改

有时候，须要去作一些底层的高级处理，这个东西就能派上用场了~

移动端

Swiper

官网地址：swiperjs.com/

主要用来解决移动端触摸滑动，像什么轮播图啊，上下滑动啊，用它就对了~

fullPage

官网地址：alvarotrigo.com/fullPage/zh…

很是好用的全屏滑动库，去官网看 demo 就能感觉到了~

PhotoSwipe

官网地址：github.com/dimsemenov/…

图片预览组件，支持移动端，相对上面组件库里面自带的，比较轻量~

Swiper + PhotoSwipe + fullPage 这 3 个一配合，微信里常见的 H5 页彻底不是问题哒！！！😝

HAMMER.JS

官网地址：hammerjs.github.io/

移动端手势库，挺不错滴~

其它经常使用小工具

Moment.js

官网地址：momentjs.com/

用 JavaScript 解析、验证、操做和显示日期和时间，很方便哦~

axios

官网地址：github.com/axios/axios

目前最多见的请求库，强推~

Can I use

官网地址：caniuse.com

开发必备，查看浏览器对各类新特性的兼容状况

果真，浏览器还不支持接水怪，伤心😭💔

regexr

官网地址：regexr.com/

平常本身写一个正则的时候，这个网站很爽~

nodeppt

官方网址：github.com/ksky521/nod…

用 node 写 ppt，就颇有格局~

以这个工具结束，是但愿你们都能作得一手好 ppt，都可以顺利晋升！！！

总结

本文已收录 Github https://github.com/ponkans/F2E，欢迎 Star，持续更新💧

上一期的《吐血整理》系列大厂前端必备工具集合（抓包、调试、Mock 数据等等），得到你们一致好评，因而怪怪我加班加点，写下了这一期。

上面的组件库，工具都是怪怪精心挑选滴，但愿能帮助到小伙伴减轻工做，happy work！！

近期在写 Node.js 的系列，传送门：

喜欢的小伙伴麻烦加个关注，点个赞哦，感恩💕😊

联系我 / 公众号

微信搜索【接水怪】或扫描下面二维码回复”加群“，我会拉你进技术交流群。讲真的，在这个群，哪怕您不说话，光看聊天记录也是一种成长。（阿里技术专家、敖丙做者、Java3y、蘑菇街资深前端、蚂蚁金服安全专家、各路大牛都在）。

接水怪也会按期原创，按期跟小伙伴进行经验交流或帮忙看简历。加关注，不迷路，有机会一块儿跑个步🏃 ↓↓↓

《吐血整理》系列 大厂前端组件库工具集合（PC端、移动端、JS、CSS等）

前言