20+前端常用组件&插件轮子

扫描二维码

对前端开发中常用的组件 & 插件，进行了整理，一个好的插件库可以大大的提升我们开发的效率。更不需要自己再花费时间创造重复的轮子。大家可以收藏，以备后用，也会持续更新~

Vue UI 组件库

  1. Element UI

    Element Plus支持Vue3，国内用的非常多，组件丰富，且可以自定义覆盖样式的组件库，适合PC和桌面端应用。

    网址：https://element-plus.org/zh-CN/

  2. Vant

    有赞公司旗下的开源组件库，适用于移动端开发。组件齐全，使用简单，UI设计也非常漂亮。

    网址：youzan.github.io/vant/#/zh-C…

  3. Vuetify

    建立在Vue.js之上的完备的界面框架。符合 Material Design设计规范。

    网址：https://vuetifyjs.com/

  4. Naive UI

    一个 Vue 3 组件库，主题可调，使用 TypeScript，快。只需要提供一个样式覆盖的对象，就可以自定义主题系统。

    网址：https://www.naiveui.com/zh-CN/os-theme

React UI 组件库

  1. Ant Design

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

    网址：https://ant.design/

  2. Mui

    符合谷歌Material Design 设计语言的React组件UI库。

    网址：https://mui.com/

动画库

1、Animate.css

纯css的动画库，内置了超多的动画效果，可以直接在线预览动画效果。

网址：https://animate.style/

2、Lottiefiles

动画效果的图片，小部件，可以在线创建编辑，生成Gif或者导出Svg。也有很多现成的很多动画效果部件，可以方便的将动画效果组件集成到产品里。

网址：https://lottiefiles.com/

交互效果组件

  1. Swiper

    滑动特效插件，纯javascript打造，面向手机、平板电脑等移动终端。不依赖于公共库。支持流行的前端框架，如React，Svelte，Vue.js，Angular等

    网址：https://www.swiper.com.cn/

  2. Mescroll

    下拉刷新和上拉刷新的js框架，适用H5，原生js, 不依赖jquery,zepto，支持vue。

    网址：http://www.mescroll.com/index.html

图标组件库

  1. iconfont

    千万矢量图标素材，支持单、多色图标。支持在线搜索，一键查询海量图标库。

    网址：https://www.iconfont.cn/

  2. xicons

    整合自 fluentui-system-icons、ionicons、ant-design-icons、material-design-icons、Font-Awesome tabler-icons 和 carbon 的 SVG格式的 Vue/React 组件。可以很方便的将图标集成到产品里。

    网址：https://github.com/07akioni/xicons

  3. Feather

    一个简单漂亮的开源SVG图标集合。

    网址：https://github.com/feathericons/feather

日期时间

  1. Day.js

    解析、验证、操作和显示日期和时间。支持国际化。文件大小只有2KB左右，是一个极简的JavaScript库。

    网址：https://dayjs.fenxianglu.cn/

  2. timeago.js

    显示(天、小时、分)之前效果，为了有更好的用户体验，xx time ago在很多产品里应用。i18n支持。文件小于2KB。

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

  3. Moment.js

    JavaScript 日期处理类库。在浏览器和 Node.js 中都能工作。支持多语言。支持日期格式化、相对时间、日历时间。

    网址：http://momentjs.cn/

工具类

  1. Lodash

    是一个一致性、模块化、高性能的JavaScript实用工具库。降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单。

    网址：https://www.lodashjs.com/

  2. ECharts

    一个基于 JavaScript 的开源可视化图表库。

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

  3. Ant Design Charts

    简单好用的 React 图表库。蚂蚁集团全新一代数据可视化解决方案。

    网址：https://charts.ant.design/

  4. MEditor.md

    一款开源在线 Markdown 编辑器

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

  5. Validator.js

    针对字符串的验证和串联库。比如：isEmail、isDate、isMobilePhone等

    网址：https://github.com/validatorjs/validator.js

  6. vue.draggable.next

    Vue拖拽组件，基于Sortable.js的Vue 3 拖放组件。

    网址：https://github.com/SortableJS/vue.draggable.next

  7. vue-qr

    Vue组件，支持Vue2 / Vue3 /Vite。可以方便的生成各种格式二维码，包括彩色和自定义样式。

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

  8. vue-cropper

    一个优雅的图片裁剪插件。

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

以上，欢迎👏🏻收藏备用，如果有好的轮子可以留言分享~