前端轮子厂

article/2025/10/16 18:47:53

1. Element

 

Element-Ul是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库，手机端有对应框架是Mint UI 。

 

中文文档：http://element-cn.eleme.io/#/zh-CN
github地址：https://github.com/ElemeFE/element

 

 

 

2. iView

 

一套基于 Vue.js 的高质量UI 组件库。


中文文档：https://www.iviewui.com/
github地址：https://github.com/iview/iview

 

 

 

3. vue-element-admin

 

vue-element-admin是基于 Vue2.0，配合使用 Element UI 组件库的一个前端管理后台集成解决方案。它使用了最新的前端技术栈，提炼了典型的业务模型，提供了丰富的功能组件。

 

中文文档：https://panjiachen.github.io/vue-element-admin-site/zh
github地址：https://github.com/PanJiaChen/vue-element-admin

 

 

 

4. Vue Material

 

通过Vue Material和Vue 2.0建立精美的app应用。


中文文档：http://vuematerial.materializecss.cn/#/
github地址：https://github.com/vuematerial/vue-material

 

 

 

5. VueStrap

 

基于 Vue.js 构建的 Bootstrap 组件，该仓库包含一系列基于 Bootstrap 标记和 CSS 的本地 Vue.js 组件。

 

在线文档：http://yuche.github.io/vue-strap/
github地址：https://github.com/yuche/vue-strap

 

 

 

6. Keen UI

 

由Vue编写的基本UI组件的轻量级集合，并受Material Design的启发。

 

在线文档：https://josephuspaye.github.io/Keen-UI/#/ui-alert
github地址：https://github.com/JosephusPaye/Keen-UI

 

 

函数库

Lodash（推荐）：github.com/lodash/loda…

Underscore：underscorejs.org/

Ramda：github.com/ramda/ramda

outils：github.com/proYang/out…

30-seconds-of-code：github.com/Chalarangel…

动画库

Animate.css

  • CSS3 动画库，也是目前最通用的动画库。
  • daneden.github.io/animate.css…

Anime.js：

  • 一个强大的、轻量级的用来制作动画的javascript库
  • animejs.com/

Hover.css：

  • CSS hover 悬停效果，可以应用于链接、按钮、图片等等。
  • github.com/IanLunn/Hov…

wow.js:

  • 滚动展示动画
  • WOW.js 依赖 animate.css，所以它支持 animate.css 多达 60 多种的动画效果。
  • github.com/matthieua/W…

scrollReveal.js：

  • 类似 wow.js
  • github.com/jlmakes/scr…

Magic.css：

  • css3 animation动画库
  • github.com/miniMAC/mag…

Waves：

  • 点击波纹效果
  • github.com/fians/Waves

move.js：

  • 一个小型的JavaScript库，通过JS来控制一系列的CSS动画顺序执行，使CSS3动画变得非常简单和优雅。
  • github.com/visionmedia…

Velocity.js：

  • 一个功能齐全的 JavaScript 动画套件，包括诸如淡入淡出、滚动、滚动、停止、结束、翻转等动画效果。
  • github.com/julianshapi…

滚动库

iscroll - 平滑滚动插件：github.com/cubiq/iscro…

BetterScroll：

  • github.com/ustbhuangyi…
  • iscroll 的优化版，使移动端滑动体验更加流畅

mescroll：

  • 移动端上拉刷新下拉加载
  • www.mescroll.com/api.html

animatescroll：

  • jQuery滚动到指定位置
  • plugins.compzets.com/animatescro…

crossfade.js：

  • jQuery图片模糊插件crossfade.js
  • www.dowebok.com/104.html

jQuery Scrollbox：

  • 图片文字滚动插件
  • www.jq22.com/jquery-info…

liMarquee：

  • jQuery无缝滚动插件
  • www.dowebok.com/188.html

轮播图

Swiper：

  • 常用于移动端网站的内容触摸滑动
  • www.swiper.com.cn/

iSlider：

  • 移动端滑动组件
  • eux.baidu.com/iSlider/dem…

slip.js：

  • 移动端跟随手指滑动组件，零依赖。
  • github.com/binnng/slip…

OwlCarousel2：owlcarousel2.github.io/OwlCarousel…

slick：www.jq22.com/jquery-info…

myFocus：www.cosmissy.com/myfocus/tut…

WebSlides：github.com/webslides/w…

jQuery轮播插件slider：www.jq22.com/jquery-info…

滚屏

fullpage：www.jq22.com/jquery-info…

弹出框

layer：

  • layer.layui.com/
  • layui 独立维护的三大组件之一（layDate、layer、layim）
  • 尽管 layui 中包含了这些组件，但因为它们受众群体广泛或应用广泛，特从 layui 中抽取出来个副本，可独立引用。我们也会对它们进行同步维护。

Bootbox.js：bootboxjs.com/

dialogBox：

  • 基于 jQuery
  • www.jq22.com/jquery-info…

easyDialog：www.h-ui.net/easydialog-…

消息通知

Notyf：

  • 简单的响应式纯js消息通知插件
  • www.htmleaf.com/jQuery/Ligh…

PNotify：

  • 页面右上角的提示信息（非弹框提示）
  • sciactive.com/pnotify/
  • sciactive.github.io/pnotify/
  • github.com/sciactive/p…

overhang.js：

  • www.jq22.com/jquery-info…
  • overhang.js 是一个JQuery插件显示即时通知、 确认或给定元素中的提示。

下拉框

select2：select2.org/

级联选择器

ustbhuangyi/picker

  • github.com/ustbhuangyi…
  • 移动端最好用的的筛选器组件、联动筛选

jQueryDistpicker：

  • fengyuanchen.github.io/distpicker/
  • www.jq22.com/demo/jQuery…

颜色选择器

Bootstrap Colorpicker 2：github.com/farbelous/b…

时间选择器

layDate：www.layui.com/laydate/

wdatepicker

时间日期处理

Moment.js：

  • Moment.js 是一个解析，验证，操作和显示日期和时间的 JavaScript 类库。
  • momentjs.com
  • github.com/moment/mome…

timeago.js：

  • 轻量级的时间转换 Javascript 库
  • github.com/hustcc/time…

表单验证

validator.js：github.com/chriso/vali…

jQuery Validation

  • jQuery 表单校验
  • github.com/jquery-vali…

Validation Plugin：

  • jQuery插件
  • www.imooc.com/learn/385

Validform：

  • 一行代码搞定整站的表单验证！- Jquery表单验证插件
  • validform.rjboy.cn/

分页插件

pagination：github.com/superRaytin…

富文本编辑器

wangEditor：www.wangeditor.com/

百度UEditor：ueditor.baidu.com/website/

CKEditor：ckeditor.com/

KindEditor：kindeditor.net/demo.php

MediumEditor：yabwe.github.io/medium-edit…

Simditor：simditor.tower.im/

Summernote：summernote.org/

Quill：quilljs.com/

Slate：github.com/ianstormtay…

Markdown 编辑器

Editor.md：pandao.github.io/editor.md/

树插件

www.treejs.cn

图片懒加载

lazyload：github.com/tuupola/jqu…

瀑布流

Masonry：www.cnblogs.com/cjc917/p/74…

Metro风兼瀑布流布局效果http://www.lanrenzhijia.com/jquery/1985.html

相册（图片滑动切换展示效果）

PC端：Viewer.js：fengyuanchen.github.io/viewerjs/

PC端：photoviewer

移动端：PhotoSwipe：www.helloweba.net/javascript/…

导航插件

okayNav：www.dowebok.com/204.html

视频播放器

Chimee

  • 组件化H5播放器框架
  • chimee.org/
  • juejin.im/entry/5a02b…

flv.js

  • Bilibili开源纯JavaScript编写的FLV播放器
  • Flash 视频（FLV）播放器
  • github.com/Bilibili/fl…
  • www.toutiao.com/a6478550535…

ckplayer：www.ckplayer.com/

jplayer：www.jplayer.cn/

html5player：juejin.im/post/596f53…

Video.js

  • 开源、免费的HTML5和Flash视频播放器
  • Video.js - 开源、免费的HTML5和Flash视频播放器

多青：dogeek.net/

弹幕视频播放器

DanmuPlayer - Html5弹幕视频播放器插件：github.com/chiruom/Dan…

jquery.danmu.js - jQuery弹幕插件：github.com/chiruom/jqu…

scroxt - 字幕字体滚动插件：github.com/chenjianfan…

复制粘贴插件

clipboard.js：github.com/zenorocha/c…

ZeroClipboard：github.com/zeroclipboa…

条形码插件

barcode

二维码插件

jquery.qrcode.js：github.com/jeromeetien…

拖拽

Draggabilly：www.jq22.com/jquery-info…

dragula：www.toutiao.com/a6491847196…

手机端事件

touch.js

文件上传

uploader

WebUploader：

  • github.com/fex-team/we…
  • HTML5 & FLASH 文件上传

代码高亮

hightlight：highlightjs.org/

前端国际化 i18n

i18next：github.com/i18next/i18…

vue-i18n：github.com/kazupon/vue…

前端系列——jquery.i18n.properties前端国际化解决方案“填坑日记”：www.cnblogs.com/landeanfen/…

基于jQuery.i18n.properties 实现前端页面的资源国际化：m.blog.csdn.net/aixiaoyang1…

地图

百度地图：lbsyun.baidu.com/

谷歌地图：www.runoob.com/googleapi/g…

高德地图：lbs.amap.com/

腾讯地图：lbs.qq.com/

网页即时通讯

LayIM：layim.layui.com/

闲聊么：www.xianliao.me/

数据可视化

ECharts ：echarts.baidu.com/index.html

阿里云 DataV

PDF 阅读器

github.com/mozilla/pdf…

主题色提取

RGBaster：github.com/briangonzal…

Color Thief

vibrant.js

前端存储

ustbhuangyi/storage：

  • 封装了sessionStorage和localStorage
  • github.com/ustbhuangyi…

store.js

  • 本地存储localstorage的封装
  • github.com/jaywcjlove/…

localForage：github.com/localForage…

数据 Mock

Easy Mock：github.com/easy-mock/e…

Mockjs：

  • mockjs.com
  • 生成任意随机数据，拦截 Ajax 请求

 

 

 

json-server + fakerjs：github.com/typicode/js…

分享

bShare

JiaThis（关闭了！！！）

QQ分享组件

百度分享

评论

Gitalk

gitment

畅言

来必力

友言（关闭了！！！）

网易云跟贴（关闭了！！！）

其他

IE浏览器版本过低提示插件IEalert.js：www.jqueryfuns.com/resource/45…

lyric-parser - QQ音乐歌词解析：github.com/ustbhuangyi…

holder.js - 图片占位符插件：github.com/imsky/holde…

jQuery放大镜插件jqzoom.js：www.jq22.com/jquery-info…

Zooming – JavaScript图片缩放库：www.dowebok.com/223.html

fastclick - 消除 click 移动浏览器300ms延迟：github.com/ftlabs/fast…

jsonp - 一个简单的JSONP实现：github.com/webmodules/…

js-base64 - Base64 编码解码：github.com/dankogai/js…

新手引导：github.com/easelinc/to…


http://chatgpt.dhexx.cn/article/l7OrnZop.shtml

相关文章

前端_Vue_1.初识Vue

前端_Vue_1.初识Vue

文章目录 一、前言二、开始1 简介1.1 什么是Vue？1.2 渐进式框架1.3 单文件组件1.4. API风格1.4.1. 选项式API（Options API）1.4.2. 组合式API（Composition API）1.4.3. 该选哪个？ 2. 快速上手（学前…
阅读更多...
Nginx-学习一

Nginx-学习一

什么是Nginx Nginx是一个http服务器。 是一个使用c语言开发的高性能的http服务器及反向代理服务器。 Nginx是一款高性能的http 服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器。由俄罗斯的程序设计师Igor Sysoev所开发，官方测试ngin…
阅读更多...
Nginx学习二

Nginx学习二

文章目录 一、proxy_set_header1.1、<span class"katex--inline">http\_host与</span>host区别1、在使用Nginx做反向代理的时候&#xff0c;proxy_set_header功能可以设置反向代理后的http header中的host&#xff0c;1.1.1、 不设置 proxy_set_header H…
阅读更多...
nginx学习一

nginx学习一

nginx 安装&#xff1a; 1、 ./configure 如果报错 error: C compiler cc is not found 如果没有安装就安装:yum install –y gcc 如果还报错看看是不是安装: yum install –y zlib zlib-devel 2、 安装 make 3、 make install 4、 安装完后可以查看到目录 5、 启动 nginx …
阅读更多...
nginx学习记录

nginx学习记录

一、docker安装nginx和配置文件 &#xff08;1&#xff09;docker拉取镜像 docker pull nginx &#xff08;2&#xff09;创建容器 # 在/root⽬录下创建nginx⽬录⽤于存储nginx数据信息 mkdir ~/nginx cd ~/nginx mkdir conf cd conf # 在~/nginx/conf/下创建nginx.conf⽂件…
阅读更多...
尚硅谷nginx学习笔记

尚硅谷nginx学习笔记

尚硅谷nginx学习笔记 1.nginx相关概念1.1什么是nginx&#xff1f;1.2正向和反向代理1.3负载均衡1.4动静分离 2.nginx在linux中的安装与启动3.nginx的常用命令4.nginx的配置文件5.nginx配置实例5.1反向代理准备工作5.2反向代理实例一5.3反向代理实例二5.4负载均衡实例5.5动静分离…
阅读更多...
Nginx学习（一）

Nginx学习（一）

系统版本CentOS Linux release 7.6.1810 (Core) Nginx作用 反向代理正向代理负载均衡HTTP服务器(包含动静分离) 环境确认 1.关闭iptables规则 如果启动的iptables防火墙不想关闭的话&#xff0c;可以通过iptables -F 来清除防火墙关闭。然后通过iptables -L查看 2.停用seli…
阅读更多...
NGINX学习记录-基础入门篇

NGINX学习记录-基础入门篇

学习《NGINX 经典教程》林静&#xff0c;刘旭峰&#xff0c;章澍&#xff0c;廖健雄&#xff0c;宗兆伟 ... 著 目录 一、Nginx优点 二、功能(应用场景) 反向代理。 负载均衡 静态缓存 Web服务器 安全和访问控制 三、nginx安装 四、启动、停止和重载nginx 五、配置文…
阅读更多...
Nginx学习总结(1)：Nginx简介

Nginx学习总结(1)：Nginx简介

(最近&#xff0c;部门组织了好几个技术兴趣小组&#xff0c;对当前的热门技术进行研究。我加入了Nginx学习小组&#xff0c;与几个同事一道围绕Nginx来进行研究和学习。从今天起&#xff0c;我会陆陆续续发一系列有关Nginx的学习总结。本文是系列之一&#xff1a;Nginx简介。)…
阅读更多...
学习nginx

学习nginx

Nginx笔记 安装nginxwget -c https://nginx.org/download/nginx-1.20.1.tar.gz1、创建软链路ls /usr/local/nginx/sbin/nginx /usr/bin/ 2、前端部署配置 Conf 在这里插入图片描述 3、启动服务 由于软链路 可以直接 nginx 启动&#xff08;任意目录&#xff09; 停止 nginx -s…
阅读更多...
nginx学习日记

nginx学习日记

nginx介绍 1.什么是nginx? nginx就是c语言开发的一个高性能HTTP和反向代理Web服务器以及电子邮件&#xff08;IMAP/POP3&#xff09;代理服务器 nginx是轻量级的。 2.什么是反向代理&#xff1f; 代理服务可以简单的分为正向代理和反向代理。 正向代理&#xff1a;就是代理…
阅读更多...
Nginx学习笔记总结：初次认识 Nginx

Nginx学习笔记总结：初次认识 Nginx

2022 年 4月 16 日 百思不得小赵 &#x1f50d;点此进入博客主页 —— 新时代的农民工 &#x1f64a; —— 换一种思维逻辑去看待这个世界 &#x1f440; 今天是加入CSDN的第1141天。觉得有帮助麻烦&#x1f44f;点赞、&#x1f340;评论、❤️收藏啦。 概述 Nginx是一个高性能…
阅读更多...
Nginx服务器学习

Nginx服务器学习

学习思维导图 Nginx服务架构说明 Nginx采用master-worker的架构&#xff0c;和tomacat的按路径匹配一个节点线程进行处理方式不同&#xff0c;Nginx是直接让worker来先抢夺资源也就是请求&#xff0c;然后在去处理&#xff0c;每个worker保持为一个独立的进程。 Nginx服务的实际…
阅读更多...
nginx学习，看这一篇就够了

nginx学习，看这一篇就够了

nginx学习&#xff0c;看这一篇就够了&#xff1a;下载、安装。使用&#xff1a;正向代理、反向代理、负载均衡。常用命令和配置文件,很全_冯安晨-CSDN博客_nginx 代理 文件下载文章目录前言一、nginx简介1. 什么是 nginx 和可以做什么事情2.Nginx 作为 web 服务器3. 正向代理4…
阅读更多...
Nginx学习+安装

Nginx学习+安装

目录 一、Nginx介绍 二、Nginx下载和安装 1.安装过程 三、了解目录结构 小知识点&#xff1a;树形结构目录展示 四、常用命令 五、配置文件结构 六、具体应用 1.部署静态资源 2.反向代理 了解正向代理 反向代理 3.负载均衡 重中之重&#xff1a;更详细的内容可以访…
阅读更多...
Nginx学习与安装

Nginx学习与安装

Nginx学习与安装 一、Nginx介绍二、Nginx 安装2.1 安装 pcre-8.44.tar.gz2.2 安装openssl与zlib2.3 安装nginx2.4 Nginx 命令 Nginx 配置文件 一、Nginx介绍 是一个高性能的HTTP和反向代理服务器&#xff0c;同时也是一个IMAP/POP3/SMTP 代理服务器。Nginx以事件驱动的方式编写…
阅读更多...
手把手学习nginx基本配置

手把手学习nginx基本配置

相信很多人都听过nginx&#xff0c;这个小巧的东西慢慢地在吞食apache和IIS的份额。那究竟它有什么作用呢&#xff1f;可能很多人未必了解。 说到反向代理&#xff0c;可能很多人都听说&#xff0c;但具体什么是反向代理&#xff0c;很多人估计就不清楚了。摘一段百度百科上的描…
阅读更多...
Nginx学习整理|入门记录

Nginx学习整理|入门记录

目录 1. Nginx概述 1.1 Nginx介绍 1.2 Nginx下载和安装 1.3 Nginx目录结构 2. Nginx命令 3. Nginx配置文件结构 4. Nginx具体应用 4.1 部署静态资源 4.2 反向代理 4.3 负载均衡 1. Nginx概述 1.1 Nginx介绍 Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件…
阅读更多...
nginx学习总结

nginx学习总结

简介 静态资源服务器&#xff0c;反向代理&#xff0c;负载均衡等&#xff0c;这些场景下&#xff0c;nginx无处不在。但是本人是在解决单个tomcat承受不了并发量的前提下&#xff0c;才走进的nginx。以下都是个人的总结&#xff0c;如果有不对的话&#xff0c;可以指出来&…
阅读更多...
Nginx入门学习

Nginx入门学习

Nginx快速入门 Nginx快速入门&#xff0c;了解什么是Nginx&#xff0c;正向代理&#xff0c;反向代理&#xff0c;负载均衡的概念&#xff0c;学会Nginx的安装和常用的命令&#xff0c;并且能实际场景应用Nginx 什么是Nginx&#xff1f; Nginx (engine x) 是一个高性能的HTTP和…
阅读更多...
推荐文章

Copyright @ 2022~2023