《吐血整理》系列 大厂前端组件库工具集合(PC端、移动端、JS、CSS等)
前言
Coding 应当是一生的事业,而不仅仅是 30 岁的青春饭
本文已收录 GitHub https://github.com/ponkans/F2E,欢迎 Star,持续更新
上一篇《吐血整理》系列 大厂前端必备工具集合(抓包、调试、Mock 数据等等)发布之后,很多小伙伴问怪怪有没有大厂前端开发工具组件库的集合,今天,它来了,它踏着七彩祥云来了!!!
企业级中后台
Ant Design
- 官网地址:ant.design/index-cn
蚂蚁金服开源 React 组件库首选,企业级中后台就直接用它就完事儿,准没错~
组件很齐全,开发起来简直神速~估计已经是很多公司的标配了,我们公司也用~
飞冰
- 官网地址:ice.work/
可视化快速搭建企业级中后台前端应用,还是很值得试一试滴~
Ant Design Vue
- 官网地址:www.antdv.com/docs/vue/in…
如果你们公司技术栈是 Vue.js,用这个就完事儿了~
虽然有 Element UI,以及一些其它的组件库,但挂怪还是推荐这个~
跨端框架
Taro
- 官网地址:nervjs.github.io/taro/
React 开发方式的跨端开发框架,目前已支持,微信/百度/字节跳动/支付宝/QQ 小程序、快应用、H5、React Native 等多端的应用。
怪怪一直都觉得,前端侧本来就不应该分这么多端,多端统一是大趋势~
怪怪好几个朋友的公司都在用这个了~
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
- 官网地址:github.com/Pasoul/jtoo…
前端 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/
移动端手势库,挺不错滴~
其它常用小工具
Day.js
- 官网地址:github.com/iamkun/dayj…
用 JavaScript 解析、验证、操作和显示日期和时间,很方便哦~
和 Moment.js 一样的API,但是比 Moment.js 轻量、小很多
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!!
近期原创热文传送门,biubiu~:
- 《吐血整理》系列 大厂前端必备工具集合(抓包、调试、Mock数据等等)
- 《大前端进阶 Node.js》系列 必知、必会、必问
- 《大前端进阶 Node.js》系列 双十一秒杀系统(进阶必看)
- 《大前端进阶 Node.js》系列 50行多进程爬虫
- 《大前端进阶 Node.js》系列 P6 前端必备脚手架/CI 构建能力(上)
《吐血整理》系列 大厂前端组件库工具集合(PC端、移动端、JS、CSS等)相关推荐
- 设计一个前端组件库,需要具备哪些能力?
大厂技术 高级前端 Node进阶 点击上方 程序员成长指北,关注公众号 回复1,加入高级Node交流群 在研究生的时候用 Vue2.0 做过一个守望先锋UI库. 当时很沉迷<守望先锋> ...
- 如何使用rollup打包前端组件/库
如何使用rollup打包前端组件/库 目前主流的前端框架vue和react都采用rollup来打包,为了探索rollup的奥妙,接下来就让我们一步步来探索,并基于rollup搭建一个库打包脚手架,来发 ...
- 全面、详细的前端组件库
全面.详细的前端组件库 前端组件库 搭建web app常用的样式/组件等收集列表(移动优先) 0. 前端自动化(Workflow) 前端构建工具 Yeoman – a set of tools for ...
- Bootstrap前端组件库+构建管理
目录 构建管理 Grunt Sass JavaScript Bootstrap作为前端组件库 一些语法 媒体查询 辅助类 栅栏系统 补充 代码示例 媒体查询 网格系统 建立可伸缩的甚至是响应式组件的方 ...
- 前端组件库自定义主题切换探索-02-webpack-theme-color-replacer webpack 的实现逻辑和原理-02
接上一篇:<前端组件库自定义主题切换探索-02-webpack-theme-color-replacer webpack 的实现逻辑和原理-01> 上一篇说到,在Handler.js的th ...
- 把游戏里面的 UI 做成前端组件库会怎么样?
在研究生的时候用 Vue2.0 做过一个守望先锋UI库. 当时很沉迷<守望先锋>,有一天突发奇想:我要把游戏里面的 UI 做成前端组件库会怎么样? 然后就一步步开始做了,最后也算把它给实现 ...
- 前端组件库自定义主题切换探索-03-webpack-theme-color-replacer webpack 同时替换多个颜色改造
接上一篇<前端组件库自定义主题切换探索-02-webpack-theme-color-replacer webpack 的实现逻辑和原理-02> 这篇我们来开始改造,让这个插件最终能达到我 ...
- 前端组件库(Element UI)的实现原理:教你如何实现自定义组件库,并打包发布至npm
前端组件库实现原理 前言 Demo地址 一. 组件库开发流程 1)新建vue项目: 2)编写自定义组件,封装成插件: 3)修改配置项 webpack.config.js: pakage.json: 4 ...
- 分享给你一个酷炫的前端组件库,还不用起来?
fancy-components 一个酷炫的前端组件库 大伙前端都是用什么组件库的呢? 我最近刚发现前端一个很好看.很炫酷的组件库.那就是fancy-components ,简直是"酷炫&q ...
最新文章
- mysqlevent每天,附答案
- 那些年借“云”出海的日子
- SAP官方帮助网站,help.sap.com 背后那些事儿
- rabbitmq使用_RabbitMQ的使用(二) RabbitMQ服务在单机中做集群
- linux文件目录的管理,Linux文件目录管理
- 压力测试以及编译安装httpd2.4
- http://book.ifeng.com/lianzai/detail_2011_05/08/6243572_37.shtml
- 霍尔在光伏发电系统中的应用与产品选型
- salt 安装kubernetes集群3节点
- 如何在linux系统中快速切换目录(目录栈的使用),如何在Linux下环境下快速切换工作目录...
- 这篇文章不错,仔细读读,码农晋升为技术管理者后,痛并快乐着的纠结内心...
- Statistic 代码统计利器
- 《C语言程序设计》第4版 何钦铭、颜晖主编 课后习题答案 第12章 课后习题
- A*搜索算法——图形搜索算法
- CSDN上海英雄会嘉宾及议程曝光 不能错过的期待
- 几何学在计算机中的应用,分形几何在计算机图形学中应用.docx
- 小米发布会被指错标中国领土
- 2019第九届MathorCup数学建模
- 超小尺寸的导电滑环介绍
- spark和zeppelin实践二:安装spark和zeppelin
热门文章
- 大数据生态与spack简介(第一次作业)
- 如何安排活动日程?Fantastical轻松帮你管理不同时区的活动!
- 【51nod1757】大灾变
- FFmpeg源码分析:avcodec_send_frame()和avcodec_receive_packet()音视频编码
- Linux下数据库连接超时时长,关于.Net Core 部署在Linux下连接SqlServer数据库超时解决办法...
- [勇者闯LeetCode] 155. Min Stack
- 二分图最大匹配问题(匈牙利算法)
- 【面试】Spring事务面试考点吐血整理(建议珍藏)
- 买书折扣算法 c语言,买书折扣最优惠问题解法
- 肉刷——App推广作弊内幕系列