前端开发中常用的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 个轮子，当然还有很多常用的轮子，如果小伙伴们有什么好用的前端轮子，也可以在评论区留言，让我们一起学习进步。