[番茄学前端] 我项目中用的18个轮子 开发效率提升180% 建议点赞收藏加关注[通俗易懂]

作为一枚前端开发者，推荐我工作中常用的18个轮子。这些轮子可以大大加快你的开发效率。

真实的中国IT公司，给你的开发时间永远是那么紧张，有时候就连加班也很难完成任务。所以几乎没什么时间去自己造个轮子，你需要更多的时间去理解业务和开发业务。所以我就介绍一下最近几年我在工作中经常使用的轮子。

React UI组件库

公司中小部分项目使用的React开发，大厂中基本上都是React, 简单推荐一下React组件库。

• Ant Design：文档齐全，社区生态良好，有手机版，还有PC版。可以用来快速创建手机/后台/内部应用的UI组件库。

  网址： Ant Design of React

• React Bootstrap：BootStrap我在JQuery时代就开始使用，现在已经推出了React Bootstrap， 虽然UI设计上没什么出彩，但是快速完成个人小项目已经足够了。

  网址： react-bootstrap

• Mui：实现了Google的Material Design 全新设计语言的React组件库。在Github上有超过5万star，最受欢迎的React组件库之一。

  网址： Mui

Vue UI组件库

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

• Element ： 国内最流行的Vue UI组件库，文档完整，支持在Vue3下使用。而且Element还提供了Element-React版本和Element-Angular版本。也就是说你掌握一套UI，可以在主流的前端开发框架中使用，如果你只学一套UI组件库，学这个就没错了。

  网址： ElementUi

• Vant：有赞公司旗下的开源组件库，适用于移动端开发。组件齐全，使用简单，UI设计也非常漂亮。同时Vant也提供了Vant-Weapp框架给小程序使用。

  网址： Vant

• View UI：刚接触Vue开发使用，第一个项目中使用的UI组件库，UI设计的非常精美，有免费版和专业版（也就是收费版）。不过出了收费版以后就很少使用了。

动画库

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

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

  网址： Aanimate.style

常用效果组件

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

• Swiper：轮播图组件这个提供的轮播图效果太多了，中文文档齐全，还有交流QQ群。支持原生、JQuery、Vue、React、Angular等，任何前端开发场景中使用。而且还有PC端和移动端。

  网址： Swiper

• Mescroll.js：滚动插件，移动端的滚动经常会出现不流畅，延迟等问题。我也尝试着去使用了很多大神些的滚动插件，多方比较，我选定了这款插件。他是基于H5的，不依赖来与其它前端框架，侵入性很小，实用性很大。如果你在滚动中遇到了问题，可以使用这个插件来解决。

  网址： Mescroll

工具类轮子

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

• Lodash.js：是一个一致性、模块化、高性能的JavaScript实用工具库。这个函数库可以在原生JS中使用，也可以在React和Vue中使用。几乎你开发中所有的函数，这个库都给你写好。你需要作的就是熟练和恰到好处的使用。

  网址： Lodash

• Day.js：它是一个极简的JavaScript库，可以为你很好的验证、操作和显示日期和时间。

  网址： Day

• Echarts：数据可视化： 我们公司的所有数据可视化插件都使用的这个组件库，可以满足企业级开发的需求。这个也算是国内最好的可视化开发组件库了。

  网址： Echart

• Editor：编辑器，作为程序员，编写Markdown格式的文档已经是必会技能了，所以如果是为程序员开发的应用和网站，一定要支持Markdown功能。我在选择Markdown编辑器时踩了很多坑，最终才找到了这款好用的组件。

  网址： Editor

• validator.js：这个组件我想大部分人都用过，因为无论时用户端，还是管理端前台开发验证都时必须的，无论是公司，还是个人。我都一直在使用这个验证插件。

  网址： Validatorjs

• vue-draggable：Vue拖拽组件, 用于现在开发的应用都需要有移动端，所以拖拽操作越来越多了，它是我目前看到的基于Vue的最好拖拽组件。

  网址： vue-draggable

• vue-qr：Vue生成二维码，如果你需要生成二维码，用这个组件绝对没错，公司的项目一直在使用，可以方便快捷的生成任何形式的二维码。包括彩色和自定义样式。

  网址： vue-qr

• vue-cropper：Vue图片剪裁无论开发任何应用，都需要用户上传图片。但又为了保持页面的一致性，所以要对上传的图片，安装设计规范，进行裁切。这时候你就可以使用这个组件了。

  网址： vue-cropper

• vue-lazyload：图片懒加载其实很多UI组件库已经有这个图片懒加载的给功能了，但是还是单独提出来一下，因为它不会和其它Vue组件库冲突，而且功能更多。

  网址： vue-lazyload

• vue-simple-upload：Vue上传组件，上传也是我们绕不开的开发需求，所以你必须拥有一个完全好用的上传组件。它非常好用，但缺点是没有官方网站，只有一个Github地址。

  网址： vue-lazyload

其实还有很多常用的轮子，但这18个是我工作中使用频率比较高的前18个，如果你有什么好用的前端轮子，也可以在评论区留言。如果以后再遇到什么好用的组件库和轮子，我也会这里持续更新。

最后

本公司有部分岗位招聘人员，早10晚7/双休/全额缴纳五险一金。有兴趣的可看看。