前端开发工作中记住这20个免费的轮子 开发效率提升200%！！！

文章目录

React UI组件库

动画库

精细化效果组件

工具类轮子

分享我在开发中经常使用的20个轮子，希望可以帮助到更对的前端小伙伴。

我最近做的都是Vue项目，公司的项目也都是Vue框架，那就先推荐我经常使用的Vue组件库

Vue UI组件库

1、Element UI

  这款是饿了么公司的，是国内最流行的前端UI组件库之一，这是我用的最多的组件库。官网的文档是非常完整的，也支持最新的Vue3框架，可以在主流的前端开发框架中使用。而且Element哈提供了一套Element-React版本和Element-Angular版本。也就是说学会这一套UI库，可以在主流的前端开发框架中使用，如果没那么多时间，先想学一套UI组件库绝对没错的。

  网址： element.eleme.io/#/zh-CN.

2、vant

  有赞公司旗下的开源组件库，适用于移动端开发。组件齐全，使用简单，UI设计也非常漂亮。
  网址：youzan.github.io/vant/#/zh-CN/

3、View UI

  这也是不错的Vue配套使用的UI库，UI设计得非常优美，之前都是免费版，后来出了专业版（收费版），支持的样式当然更加丰富。

  网址：www.iviewui.com/

React UI组件库

1、Ant Design

  Ant Design 源自蚂蚁金服体验技术部的后台产品开发，文档齐全，社区生态良好，有手机版，还有PC版。可以用来快速创建手机/后台/内部应用的UI组件库。

  网址：ant.design/index-cn

2、React Bootstrap

  相信在JQuery时代大部分人都使用过这个。现在已经推出了React Bootstrap，设计上相比而言显得比较平淡，但是搭建一个小的项目足够使用了。

  网址：react-bootstrap.github.io/

3、MATERIAL-UI

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

  网址：mui.com/zh

动画库

Animate.css

制作一些基本的页面以上都可以实现，但是想让页面更好看，动画效果少不了，推荐下面这款动画插件。

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

  网址：animate.style

精细化效果组件

  上面介绍了一些UI组件库，组件库的组件大而全，但是精细化程度有时候还是不够的，再来介绍一些小而精的专属组件。

1、Swiper

  Swiper这个轮播图组件的轮播图效果太丰富了，支持双端开发，中文文档介绍的够清楚。支持原生、JQuey、Vue、React、Angular等，还支持双端开发，适用前端开发场景中使用。

  网址：swiper.com.cn

2、mescroll.js

  mescroll.js是一款滚动插件，移动端的滚动经常会出现不流畅，延迟等问题。他是基于H5的，不依赖来与其它前端框架，侵入性很小，实用性很大。如果你在滚动中遇到了问题，可以使用这个插件来解决。

  网址：/www.mescroll.com/api.html

工具类轮子

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

1、lodash.js

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

  网址：www.lodashjs.com

2、Day.js

  Day.js是一个极简的JavaScript库，可以为现代浏览器解析、验证、操作和显示日期和时间。Day.js下载、解析、执行的JavaScript更少，伪代码留下跟多的时间。Day.js对国际化也有很大的支持。

  网址：dayjs.fenxianglu.cn

3、timeago.js

  它是显示几小时之前，很多随时更新的网站和应用，为了显示出及时性，不再显示具体发布的时间，而是改为几分钟或者几小时前发布的。这样显着时效性更好。

网址：github.com/hustcc/timeago.js

4、Echarts

  他是一个基于 JavaScript 的开源可视化图表库。数据可视化在过去的几年中得到了长足的发展。开发者对于可视化产品的期待不再是简单的图表创建工具，而在交互、性能、数据处理等方面有了更高级的需求。Apache ECharts 刚好满足了这个需要，可以满足企业级的开发需求。

  网址：echarts.apache.org/zh/index.html

5、Markdown

  作为程序员，编写Markdown格式的文档已经是必会技能了，所以如果是为程序员开发的应用和网站，一定要支持Markdown功能。

  网址：pandao.github.io/editor.md

6、validator.js

  validator.js是个表单验证工具 ，这个组件我想大部分人都用过，因为无论是前端还是后端，做表单的时候都必须进行一个表单验证，还是很推荐的。
网址：github.com/validatorjs/validator.js

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

7、vue-draggable

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

  网址：www.itxst.com/vue-draggable/tutorial.html

8、vue-qr

  Vue二维码生成工具，如果你需要生成二维码，用这个组件绝对没错，可以方便快捷的生成任何形式的二维码。包括彩色和自定义样式。

  网址：www.npmjs.com/package/vue-qr

9、vue-cropper

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

  网址：github.com/xyxiao001/vue-cropper

10、vue-lazyload

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

  网址：npmjs.com/package/vue-lazyload

11、vue-simple-upload

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

  网址：github.com/saivarunk/vue-simple-upload

其实还有很多常用的轮子，但这20个是工作中使用频率比较高的前20个，如果你有什么好用的前端轮子，也可以在评论区留言。