前端开发中常用的20个轮子 让你开发效率提升200%

目录
文章目录隐藏
  1. Vue UI 组件库
  2. React UI 组件库
  3. 动画库
  4. 常用效果组件
  5. 工具类轮子

前端开发中常用的 20 个轮子 让你开发效率提升 200%

我们中国 IT 公司,给你的开发时间永远是那么紧张,有时候就连加班也很难完成任务(有同感的点个赞,哈哈)。所以几乎没什么时间去自己造个轮子,你需要更多的时间去理解业务和开发业务。所以我就分享一下最近一年内我在工作中经常使用的轮子,相信我能用到的对于大家也有用。

这些只是自己常使用的,我相信大家也有更好的组件和轮子。不要吝啬,欢迎评论区留言,分享你的常用组件。

Vue UI 组件库

目前公司大部分的前端开发使用的是 Vue 框架,所以好的 Vue UI 组件库也必须推荐一下。而且 Vue 在国内也是最流行的前端框架。

  1. Element : 国内最流行的 Vue UI 组件库,文档完整,支持在 Vue3 下使用。而且 Element 还提供了 Element-React 版本和 Element-Angular 版本。也就是说你掌握一套 UI,可以在主流的前端开发框架中使用,如果你只学一套 UI 组件库,学这个就没错了。网址:传送门
  2. vant :有赞公司旗下的开源组件库,适用于移动端开发。组件齐全,使用简单,UI 设计也非常漂亮。网址:传送门
  3. View UI: 我刚接触 Vue 开发使用,第一个项目中使用的 UI 组件库,UI 设计的非常精美,有免费版和专业版(也就是收费版)。从收费版出了以后,我使用的就少了。网址:传送门

React UI 组件库

公司的测试项目和我自己的项目全部使用 React 开发,所以先来推荐我经常使用的 React 组件库。

  1. Ant Design :文档齐全,社区生态良好,有手机版,还有 PC 版。可以用来快速创建手机/后台/内部应用的 UI 组件库。我的博客,就是那这个组件库制作的。网址:传送门
  2. React Bootstrap : BootStrap 我在 JQuery 时代就开始使用,现在已经推出了 React Bootstrap, 虽然 UI 设计上没什么出彩,但是快速完成个人小项目已经足够了。网址:传送门
  3. MATERIAL-UI:实现了 Google 的 Material Design 全新设计语言的 React 组件库。在 Github 上有超过 5 万 star,最受欢迎的 React 组件库之一。现在也叫做 Mui。网址:传送门 1 or 传送门 2

动画库

如果想页面制作的好看,动画效果一定是少不了的。所以必须推荐动画插件。

  • Animate.css 纯 css 的动画库,所以无论你前端使用什么框架,都可以非常方便的使用它,内置了超多的动画效果,并且预览起来也非常方便。网址:传送门

我是真的很喜欢这个动画库,我参与的 90%的项目中都使用到了这个动画库。

常用效果组件

所有介绍了一些 UI 组件库,组件库的组件大而全,但精细程度有时候是不够的,所以有时候我们还需要一些小而精的专属组件。

  1. 轮播图组件:swiper,这个提供的轮播图效果太多了,中文文档齐全,还有交流 QQ 群。支持原生、JQuery、Vue、React、Angular 等,任何前端开发场景中使用。而且还有 PC 端和移动端。比较讨厌的是官网有很多弹出广告,但也能理解,为了生存吗。网址:传送门
  2. 滚动插件:mescroll.js , 移动端的滚动经常会出现不流畅,延迟等问题。我也尝试着去使用了很多大神些的滚动插件,多方比较,我选定了这款插件。他是基于 H5 的,不依赖来与其它前端框架,侵入性很小,实用性很大。如果你在滚动中遇到了问题,可以使用这个插件来解决。网址:传送门

工具类轮子

开发中除了界面的制作,也需要一些工具类的轮子,下面就介绍一下我开发中使用的一些工具类轮子。

  1. 函数库:lodash.js ,是一个一致性、模块化、高性能的 JavaScript 实用工具库。这个函数库可以在原生 JS 中使用,也可以在 React 和 Vue 中使用。几乎你开发中所有的函数,这个库都给你写好。你需要作的就是熟练和恰到好处的使用。网址:传送门
  2. 函数库:Day.js , 它是一个极简的 JavaScript 库,可以为你很好的验证、操作和显示日期和时间。网址:传送门
  3. timeago.js,它是显示几小时之前,很多随时更新的网站和应用,为了显示出及时性,不再显示具体发布的时间,而是改为几分钟或者几小时前发布的。这样显着时效性更好。这个插件的作用就是这个。如果需要,请收藏好。网址:传送门
  4. echarts 数据可视化: 我们公司的所有数据可视化插件都使用的这个组件库,可以满足企业级开发的需求。这个也算是国内最好的可视化开发组件库了。网址:传送门
  5. Markdown 编辑器: Markdown ,作为程序员,编写 Markdown 格式的文档已经是必会技能了,所以如果是为程序员开发的应用和网站,一定要支持 Markdown 功能。我在选择 Markdown 编辑器时踩了很多坑,最终才找到了这款好用的组件。网址:传送门
  6. 表单验证:validator.js ,这个组件我想大部分人都用过,因为无论时用户端,还是管理端前台开发验证都时必须的,无论是公司,还是个人。我都一直在使用这个验证插件。网址:传送门

因为我平时的开发,大多使用 Vue 进行,所以再多分享几个关于 Vue 的常用工具组件。

  1. Vue 拖拽组件 :vue-draggable, 用于现在开发的应用都需要有移动端,所以拖拽操作越来越多了,它是我目前看到的基于 Vue 的最好拖拽组件。网址:传送门
  2. Vue 生成二维码:vue-qr 如果你需要生成二维码,用这个组件绝对没错,公司的项目一直在使用,可以方便快捷的生成任何形式的二维码。包括彩色和自定义样式。网址:传送门
  3. Vue 图片剪裁 : vue-cropper 无论开发任何应用,都需要用户上传图片。但又为了保持页面的一致性,所以要对上传的图片,安装设计规范,进行裁切。这时候你就可以使用这个组件了。网址:传送门
  4. 图片懒加载:vue-lazyload 其实很多 UI 组件库已经有这个图片懒加载的给功能了,但是还是单独提出来一下,因为它不会和其它 Vue 组件库冲突,而且功能更多。网址:传送门
  5. Vue 上传组件:vue-simple-upload 上传也是我们绕不开的开发需求,所以你必须拥有一个完全好用的上传组件。它非常好用,但缺点是没有官方网站,只有一个 Github 地址。网址:传送门

以上就是码云笔记分享的前端开发工作中使用频率比较高的前 20 个轮子,当然还有很多常用的轮子,如果小伙伴们有什么好用的前端轮子,也可以在评论区留言,让我们一起学习进步。

「点点赞赏,手留余香」

6

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系maynote@foxmail.com处理
码云笔记 » 前端开发中常用的20个轮子 让你开发效率提升200%

发表回复