前言
Coding 应当是一生的事业,而不仅仅是 30 岁的青春?
大厂前端开发工具、组件库的集合,今天,它来了,它踏着七彩祥云来了!!!
企业级中后台
Ant Design
官网地址:https://ant.design/index-cn
蚂蚁金服开源 React 组件库首选,企业级后台直接用它就完事儿,没毛病~
组件很齐全,开发起来简直神速~
![b987514ed601afe24a08a7252020c78e.png](https://i-blog.csdnimg.cn/blog_migrate/132ead88195935f8ff543458fad3ac31.png)
飞冰
官网地址:https://ice.work/
可视化快速搭建企业级中后台前端应用,值得试一试~
![64727ae9fd96fb6836ca888c95d62e67.png](https://i-blog.csdnimg.cn/blog_migrate/e1e3a8783a5d27f4b0bf4f51ac9b902d.png)
Ant Design Vue
官网地址:https://www.antdv.com/docs/vue/introduce-cn/
如果你们公司技术栈是 Vue.js,用这个就完事儿了~
![653fa5d7e1f90b48513a36889ab32040.png](https://i-blog.csdnimg.cn/blog_migrate/62c2823ef0cce19ec5bbb1f798db1046.png)
跨端框架
Taro
官网地址:https://nervjs.github.io/taro/
React 开发方式的跨端开发框架,目前已支持,微信/百度/字节跳动/支付宝/QQ 小程序、快应用、H5、React Native 等多端的应用。
创业公司必备,最近刚出的 Taro3.0,真的超级强大。
![f8ed105bcdec41dc336ac2df23df770f.png](https://i-blog.csdnimg.cn/blog_migrate/865eea4259d91db5cfc4cdd18319cdcc.png)
Taro UI
官网地址:https://taro-ui.jd.com/
基于上面 Taro 跨端框架开发的多端 UI 组件库,不得不说,京东还是考虑得周到,点赞!
使用 Taro,就可以实现全站技术栈统一了~
![030f244dd6bdf27ba5f658fae8ca0da2.png](https://i-blog.csdnimg.cn/blog_migrate/f6317ac149c31ad4e2f9e32b9877c20d.png)
uni-app
官网地址:https://uniapp.dcloud.io/
Vue.js 开发方式的跨端开发框架,个人还是更推荐 Taro,特别是现在出了 Taro3.0 ,真的很强大,创业公司必备~
![859fcaf66909a0c3be901f4db279b958.png](https://i-blog.csdnimg.cn/blog_migrate/a1eaa12eb5aca48110c0f6eea5922552.png)
数据可视化
AntV
官网地址:https://antv.gitee.io/zh#products
数据可视化中的王者,别犹豫了,用它就对了~
PC 端,移动端都给你考虑到了~
![5545cca9e216cb035838322cec169213.png](https://i-blog.csdnimg.cn/blog_migrate/e4b4445d778989f5b22dda2e3e9a7373.png)
图片处理
Image Cropper
官网地址:http://elemefe.github.io/image-cropper/
给图片显示一个裁剪框,裁剪框允许用户调整大小和位置,常用来做用户自定义头像的裁剪功能。
![b9c11b2fcfb7d30edf77c0e888f62795.png](https://i-blog.csdnimg.cn/blog_migrate/5ed29c22ab8dca7481ced459cd72ab6a.png)
img-2
官网地址:https://github.com/RevillWeb/img-2
使用 web worker 做的图片懒加载~
不过针对自己的公司,怪怪建议像懒加载、预加载这种东西,还是自己做一套比较好哦~
![415ac7c6af176dbd6ec60810bffc9c83.png](https://i-blog.csdnimg.cn/blog_migrate/f32d43619631a21351c554fc63c8de01.png)
Fabric.js
官网地址:http://fabricjs.com/
有时候会碰到图片合成类的需求,这个库是基于 canvas 开发滴,支持拖拽,有类似需求的小伙伴可以试试~
![4727217675186116919f7a2b70ea47c5.png](https://i-blog.csdnimg.cn/blog_migrate/a9b939361541ba3c02b9bb949dff14b4.png)
nsfwjs
官网地址:https://github.com/infinitered/nsfwjs
这个库就有点东西了,鉴定图片是否符合要求,这个我没用过,不过感觉会有点用~
不过像这种不符合要求的图片过滤,真正企业里面,都是风控团队来处理滴,不需要我们前端来搞~
![b4a85add86293cb685728b15a8925ae1.gif](https://i-blog.csdnimg.cn/blog_migrate/cecb4d108c77b08c1c36cce265598de6.gif)
Squoosh
官网地址:https://squoosh.app/
谷歌在线图片压缩,怪怪经常用~
不过真正项目里面,公司前端基建小分队一般都会封装一套图片压缩类的组件~
![322693a1718fceff7443c33799f0b0e9.png](https://i-blog.csdnimg.cn/blog_migrate/857de4c2d6073ae1bad83d0230eb4afa.png)
SpriteJS
官网地址:https://spritejs.org/#/
360 团队开发的,高性能图形系统,它能够支持 web、node、桌面应用和小程序的图形绘制和实现各种动画效果,对 360 的东西还是挺有好感,齐舞周刊有点东西~
![105ef52b2a60a28c27ab57c90641f34e.png](https://i-blog.csdnimg.cn/blog_migrate/44b3c2b4d8fed195c914e0a6d4a57633.png)
UI 样式
imgcook
官网地址:https://imgcook.taobao.org/docs
很大程度上减轻了前端的工作量!!!,支持 Sketch、PSD、静态图片直接转 code,也就是大家常说的 ui2code。可以直接转成代码!!
没用过的小伙伴,一定要去试试!!!
![4353f94312304ebbb79507d966e0bb14.png](https://i-blog.csdnimg.cn/blog_migrate/e283281b29196ef296ab1ee61791965d.png)
animate.css
官网地址:https://github.com/daneden/animate.css
这大概是最全的 css 动画库了~
![85f342e5b0b1d49cb47985dea1201001.png](https://i-blog.csdnimg.cn/blog_migrate/a641a477b5292d540569dee0d3c5e98b.png)
direction-reveal
官网地址:https://nigelotoole.github.io/direction-reveal/#
根据鼠标进入位置,展现从不同方向 展现 hover 效果,pc 端还是会遇到这样的需求。
支持很多种效果,基本上包含了日常所有的情况~
![d01635f5ce1a4b4b73a5cb7f74ab96c0.png](https://i-blog.csdnimg.cn/blog_migrate/61e44b6b0bd9e498f4bb288f4a03430c.png)
lax.js
官网地址:https://github.com/alexfoxy/laxxx
上面的动画库,配上这个滚动特效库,简直完美
压缩完只有 2kb,很轻量
![2ff3f4778481bbd323c0ca06b750b2b5.gif](https://i-blog.csdnimg.cn/blog_migrate/4daad9a0e0964556510aa8141c35e525.gif)
purifycss
官网地址:https://github.com/purifycss/purifycss
可以帮助你移除没使用到的 css,也算是一个小优化点~
![f02a8ba264f61b6de92b22d5c2766181.png](https://i-blog.csdnimg.cn/blog_migrate/7f2b7f0758df6f4170bc4cf4cc56bed1.png)
Vue.js
vue-virtual-scroller
官网地址:https://github.com/Akryum/vue-virtual-scroller
基于 vue 的虚拟列表无限滚动,性能还不错~
怪怪公司基建小分队自己做了一套无限滚动加载滴,没用这个~
![35c009846a8acc9ebc3a5e04b7d1bc87.png](https://i-blog.csdnimg.cn/blog_migrate/135cbec7ee3c0fbb34d665cd9c6c462b.png)
Vue.Draggable
官网地址:https://github.com/SortableJS/Vue.Draggable
以前怪怪实习的时候,就遇到了运营需要对后台一些元素进行拖拽的场景,就是用的这个~
![a9a5a212437fe1a9e6b2b0553ec0823a.png](https://i-blog.csdnimg.cn/blog_migrate/581a165536e0500a99e598dfec696f3c.png)
JavaScript
eslint
官网地址:https://github.com/eslint/eslint
这玩意的出现解决了大部分强迫症程序员的问题,统一 JavaScript 代码风格
这不用犹豫,公司的代码规范必须统一啊~
![fafc5dedc08ecc492d695ef167f13108.png](https://i-blog.csdnimg.cn/blog_migrate/2713117b98814c757925bcaae06343d9.png)
JavaScript Obfuscator Tool
官网地址:https://obfuscator.io/
JavaScript 代码混淆工具,该混淆时就混淆~
![351e0cf101a9abdbd8bcf3fa6c791c82.png](https://i-blog.csdnimg.cn/blog_migrate/daa01c6bd1ed08e92282ab6c1471b3c0.png)
lodash
官网地址:https://lodash.com/
lodash 是一套工具库,内部封装了字符串、数组、对象等常见数据类型的处理函数。
很实用,用过你就知道了~
![d22f85876cb55a8ac4f5a25aab3f406d.png](https://i-blog.csdnimg.cn/blog_migrate/53faaaa37a0a182fed419e3ef6927bf8.png)
jlb-tools
官网地址:https://jielibang.github.io/jtools/index.html
前端 js 工具库: 封装常用的工具函数,如日期格式化、浏览器判断等,提高开发效率
如果是自己的公司,这种东西一定要有一套封装到脚手架里面,对于开发很省事儿~
![c0c4a7ec5d4c943e530e8c3a4b2e9488.png](https://i-blog.csdnimg.cn/blog_migrate/f9c119c43b6957c1a74761d94c0d3177.png)
jscodeshift
官网地址:https://github.com/facebook/jscodeshift
将 js 内容解析成 AST 语法树,然后提供一些便利的操作接口,方便我们对各个节点进行更改
有时候,需要去做一些底层的高级处理,这个东西就能派上用场了~
![159f404dcb6f34007f06599cc8408d36.png](https://i-blog.csdnimg.cn/blog_migrate/a3ad59cbbd0364256b0666505ecabcd9.png)
移动端
Swiper
官网地址:https://swiperjs.com/
主要用来解决移动端触摸滑动,像什么轮播图啊,上下滑动啊,用它就对了~
![19745e8d36198bb48e1fce2c8cee58b5.png](https://i-blog.csdnimg.cn/blog_migrate/c5f7bd94664be30ebb863dc51892e7db.png)
fullPage
官网地址:https://alvarotrigo.com/fullPage/zh/#page2
非常好用的全屏滑动库,去官网看 demo 就能感受到了~
![a6867bc075f94c6e004adcb14f3d2def.png](https://i-blog.csdnimg.cn/blog_migrate/beb4ae65d56f98db72d737f3b807e5d7.png)
PhotoSwipe
官网地址:https://github.com/dimsemenov/photoswipe
图片预览组件,支持移动端,相对上面组件库里面自带的,比较轻量~
Swiper + PhotoSwipe + fullPage 这 3 个一配合,微信里常见的 H5 页完全不是问题哒!!!
![103609558668c4444569b90bb7c4dec6.png](https://i-blog.csdnimg.cn/blog_migrate/5b880185297e5fa1475611b4f7d8dd61.png)
HAMMER.JS
官网地址:http://hammerjs.github.io/
移动端手势库,挺不错滴~
![89de49ab207130c2b4bc5773dbbac266.png](https://i-blog.csdnimg.cn/blog_migrate/956b263cd32e0c2de05afb8514145bd1.png)
其它常用小工具
Day.js
官网地址:https://github.com/iamkun/dayjs
用 JavaScript 解析、验证、操作和显示日期和时间,很方便哦~
和 Moment.js 一样的 API,但是比 Moment.js 轻量、小很多
![fbbb5d466d5d76df5b52f2a22a2e40da.png](https://i-blog.csdnimg.cn/blog_migrate/cffc6370e720659ca32ab13a7f9867d0.png)
axios
官网地址:https://github.com/axios/axios
目前最常见的请求库,强推~
![b67660fde18a64d186cdd29254664131.png](https://i-blog.csdnimg.cn/blog_migrate/6a001921cb4b193b4c3e463aa91cf137.png)
Can I use
官网地址:https://caniuse.com
开发必备,查看浏览器对各种新特性的兼容情况
果然,浏览器还不支持接水怪,伤心
![1dc714b2f2af9147629000e774f69250.png](https://i-blog.csdnimg.cn/blog_migrate/ddf462cd6313d48c1299779797cab2b4.png)
regexr
官网地址:https://regexr.com/
日常自己写一个正则的时候,这个网站很爽~
![e9a53a6a7243a8b85c28be9afc309092.png](https://i-blog.csdnimg.cn/blog_migrate/3fc26595a40abcf31451fa9920b5f9ca.png)
nodeppt
官方网址:https://github.com/ksky521/nodePPT
用 node 写 ppt,就很有格局~
以这个工具结束,是希望大家都能做得一手好 ppt,都能够顺利晋升!!!
![138e7ec2ef4a42c0ce460320d4b0c657.png](https://i-blog.csdnimg.cn/blog_migrate/cca731617045f65f6dc6e5afb4da18c2.png)
总结
上面的组件库,工具都是怪怪精心挑选滴,希望能帮助小伙伴们减轻工作量,happy work!!
喜欢的小伙伴加关注,点在看哦,感恩??
公众号:前端食堂
掘金:童欧巴
知乎:童欧巴
这是一个终身学习的男人,他在坚持自己热爱的事情,欢迎加入前端食堂,和这个男人一起开心的变胖~
推荐阅读:
今天我更新了Chrome 87 ,发现了这么多新特性!
精选VS Code高频插件,让你多陪陪npy!
在看和转发是莫大鼓励❤️