您的当前位置:首页>全部文章>文章详情

前端开发中项目常用的20多个轮子 快速提高开发效率 建议收藏

发表于:2021-10-15 10:04:37浏览:2663次TAG: #文件上传 #开发工具 #Vue #javascript #前端开发

作为一个前端开发者,很多开发工作与其自己造个轮子,还不如目前流行的轮子,大家在工作中常用到很多轮子,这些轮子可以大大加快开发效率。今天就分享一下前端项目中经常使用的轮子。

1、React UI组件库

Ant Design :

文档齐全,社区生态良好,有手机版,还有PC版。可以用来快速创建手机/后台/内部应用的UI组件库。我的博客,就是那这个组件库制作的。

网址:https://ant.design/


React Bootstrap :

 BootStrap现在已经推出了React Bootstrap, 虽然UI设计上没什么出彩,但是快速完成小项目已经足够了。

网址:https://react-bootstrap.github.io/


MATERIAL-UI:

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

网址:material-ui.com/ or https://mui.com/zh/


2、Vue UI组件库

Vue在国内也是最流行的前端框架,所以好的Vue UI组件库也必须推荐一下。


Element :

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

网址:https://element.eleme.io/#/zh-CN


vant :

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

网址:youzan.github.io/vant/


View UI: 

我刚接触Vue开发使用,第一个项目中使用的UI组件库,UI设计的非常精美,有免费版和专业版(也就是收费版)。从收费版出了以后,我使用的就少了。


网址:www.iviewui.com/



WeUI

是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。用它做微信站体验一致。


网址:https://weui.io


Layui

layui 是一套开源的 Web UI 解决方案,采用自身经典的模块化规范,并遵循原生 HTML/CSS/JS 的开发方式,常适合网页界面的快速开发。layui 区别于那些基于MVVM 底层的前端框架,它更多是面向后端开发者,无需涉足前端各种工具,只需面对浏览器本身,让一切所需要的元素与交互。

layui 官网于 2021 年 10 月 13 日 进行下线,包括新版下载、文档和示例在内的所有框架日常维护工作,全部迁移到 Github 和 Gitee。


网址:https://gitee.com/sentsin/layui


ICEUI

一款高效的HTML5前端框架,她的灵魂来自于自身顶级艺术的设计风格,像冰一样清明,像玉一样纯洁,以其独特的艺术表现及丰富的内涵特征向人们诠释了一个全新的前端框架理念,纯原生开发,无任何依赖,冰清玉洁,高贵典雅!


网址:https://www.iceui.cn/


3、动画库

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

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

网址:https://animate.style/


轮播图组件:swiper

这个提供的轮播图效果太多了,中文文档齐全,还有交流QQ群。支持原生、JQuery、Vue、React、Angular等,任何前端开发场景中使用。而且还有PC端和移动端。比较讨厌的是官网有很多弹出广告,但也能理解,为了生存吗。

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


滚动插件:mescroll.js 

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

网址:http://www.mescroll.com/api.html


4、工具类轮子

函数库:lodash.js

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

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


函数库:Day.js 

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

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


timeago.js

它是显示几小时之前,很多随时更新的网站和应用,为了显示出及时性,不再显示具体发布的时间,而是改为几分钟或者几小时前发布的。这样显着时效性更好。这个插件的作用就是这个。如果需要,请收藏好。

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


echarts 数据可视化

可以满足企业级开发的需求。这个也算是国内最好的可视化开发组件库了。

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


Markdown编辑器: Markdown 

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

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


表单验证:validator.js 

这个组件估计大部分人都用过,因为无论时用户端,还是管理端前台开发验证都时必须的,无论是公司,还是个人。

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



Vue拖拽组件 :vue-draggable

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

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


Vue生成二维码:vue-qr

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

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


Vue图片剪裁 : vue-cropper

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

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


图片懒加载:vue-lazyload

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

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


Vue上传组件:vue-simple-upload

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

网址:https://github.com/saivarunk/vue-simple-upload