整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

超级棒的170+款web前端开发工具汇总

超级棒的170+款web前端开发工具汇总

们与企业内部的Web开发团队进行了很多次交流,研究了很长时间,最后将Debug工具与Web前端开发工具整理汇总在了一起,这些工具对每个Web开发人员都非常有用。

这些工具将使您的工作更加轻松,特别是如果您是Web开发人员,Web设计人员或项目经理。您应该查看一下并尝试一下。

不管您是网站开发人员还是设计师?这些工具将使您的生活和工作流程更加轻松。

Web前端开发工具

01、Alertify.js

网址:http://alertifyjs.com/

AlertifyJS是一个JavaScript框架,用于开发漂亮的浏览器对话框和通知。它不仅可以替代默认的浏览器对话框,还可以非常轻松地创建自己的对话框。是每个Web前端开发人员必须具备的工具。

02、Alfred

网址:http://www.alfredapp.com/

Alfred是Mac OS X上屡获殊荣的应用程序,可通过热键和关键字提高工作效率。

03、AlloyUI

网址:http://alloyui.com/

AlloyUI是在YUI3(JavaScript)之上构建的框架,该框架使用Bootstrap(HTML / CSS)提供用于构建高可扩展性应用程序的简单API。

04、AngularJS

网址:https://angularjs.org/

AngularJS允许您扩展应用程序的HTML。具有极强的表现力,可读性,并且可以快速构建开发。

05、Backbone

网址:https://backbonejs.org/


Backbone.js通过提供具有自定义事件的模型与丰富的可枚举函数API,具有声明性事件处理的视图的集合,并通过RESTful JSON接口将其全部连接到您现有的API,从而为Web应用程序提供结构。

06、Bitbucket

网址:https://bitbucket.org/

Bitbucket提供分布式版本控制,使您和您的团队可以轻松地进行协作。

07、Bower

网址:http://bower.io/

网站由很多东西组成—框架,库,资产,实用程序和彩虹。Bower为您管理所有这些事情。没有它,前端Web开发就困难得多。

08、Brackets

网址:http://brackets.io/

现代的,开放源代码的文本编辑器,可用于Web开发设计。

09、Colourcode

网址:https://colourco.de/

探索和发现颜色的工具。方案中的色板,色相,亮度,饱和度变化的控件,以.less或png格式导出。

10、CSS Comb

网址:http://csscomb.com/

使您的代码漂亮的工具。就如此容易。

11、CSS Compressor

网址:http://www.cssdrive.com/index.php/main/csscompressor/

使用此实用程序压缩CSS,以提高加载速度并节省带宽。

12、CSS Lint

网址:http://www.cssdrive.com/index.php/main/csscompressor/

CSS Lint是一个开源CSS代码质量工具。会伤到你的心情

(并帮助您更好地编码)。

13、CSSCSS

网址:https://zmoazeni.github.io/csscss/

CSS冗余分析器,用于分析冗余。

14、Dabblet

网址:http://dabblet.com/

交互式CSS游乐场和代码共享工具。Dabblet可以将要点保存到Github,并为CSS编辑提供了许多便利。

15、Dromaeo

网址:http://dromaeo.com/

以Dromaeosaurs命名的JavaScript性能测试套件。

16、Ember.js

网址:http://blog.debugme.eu/front-end-web-developer-tools/emberjs.com

用于创建雄心勃勃的Web应用程序的框架。应该在每个前端Web开发人员的工具包中都包含。

17、Fontastic

网址:http://fontastic.me/

可以在几秒钟内创建图标字体。使您的网站运行更快。

18、Fontello

网址:http://fontello.com/

使用图标构建自定义字体的工具。

19、Foundation

网址:https://get.foundation/

Foundation是响应式前端框架家族,可轻松设计精美的响应式网站,应用程序和电子邮件,在任何设备上看起来都很棒。

20、Framework 7

网址:https://framework7.io/#.Vd7TmPmqqko

用于构建iOS和Android应用程序的全功能HTML框架。

21、GitHub

网址:https://github.com/

GitHub是人们构建软件的方式。拥有超过1000万的开发者社区,开发人员可以使用强大的协作开发工作流程发现,使用并贡献超过2600万个项目。

22、Grunt

网址:https://gruntjs.com/

Grunt生态系统非常庞大,而且每天都在增长。字面上有数百种可供选择的插件,您可以使用Gruntto进行几乎任何事情的自动化。

23、HTML5 Boilerplate

网址:https://html5boilerplate.com/

HTML5 Boilerplate可帮助您构建快速,健壮且适应性强的Web应用程序或网站。借助数百位开发人员的综合知识和精力,一站式启动您的项目。

24、HTML5 Please

网址:https://html5please.com/

查找HTML5,CSS3等功能,了解它们是否已准备就绪,以及是否可以使用Polyfills,fallbacks或按原样使用它们。

25、Icomoon

网址:https://icomoon.io/

IcoMoon应用程序可让您构建和使用不同格式的图标集,包括SVG,图标字体或简单的PNG / CSS代码。

26、JavascriptOO

网址:http://www.javascriptoo.com/

您应该使用示例,类别,安装命令,CDN链接,项目和作者统计信息来研究每个JavaScript项目。

27、jQuery

网址:https://jquery.com/

jQuery是一个快速,小型且功能丰富的JavaScript库。借助易于使用的API(可在多种浏览器中使用),使HTML文档的遍历和操作,事件处理,动画和Ajax等事情变得更加简单。

28、jQuery UI

网址:http://jqueryui.com/

jQuery UI是在jQuery JavaScript库之上构建的一组精选的用户界面交互,效果,小部件和主题。无论是构建高度交互的Web应用程序,还是只需要向表单控件添加日期选择器,jQuery UI都是比较理想的选择。

29、JS Hint

网址:http://www.jshint.com/

JSHint是一个社区驱动的工具,用于检测JavaScript代码中的错误和潜在问题并强制执行您团队的编码约定。它非常灵活,因此您可以轻松地将其调整为特定的编码准则以及希望在其中执行代码的环境。


30、JSFiddle

网址:https://jsfiddle.net/

使用JSFiddle代码编辑器在线测试您的JavaScript,CSS,HTML或CoffeeScript。非常好用,推荐使用。

31、JSontoHTML

网址:http://json2html.com/

json2html是一个开放源代码的JavaScript库,它使用JSON模板将JSON对象转换为HTML。

32、LightTable

网址:http://lighttable.com/

Light Table通过即时反馈将您连接到您的创作,并显示数据值流过您的代码。

33、LiveReload

网址:http://livereload.com/

LiveReload监视文件系统中的更改。保存文件后,将根据需要对其进行预处理,并刷新浏览器。更酷的是,当您更改CSS文件或图像时,浏览器会立即更新,而无需重新加载页面。

34、Meteor

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

Meteor是一个完整的开源平台,可以使用纯JavaScript构建Web和移动应用程序。

35、Modernizr

网址:http://modernizr.com/

无论浏览器是否支持某个功能,Modernizr均可让您轻松编写条件JavaScript和CSS来处理每种情况。

36、Normalize.css

网址:http://necolas.github.io/normalize.css/

Normalize.css使浏览器更一致地渲染所有元素,并符合现代标准。它只针对需要规范化的样式。

37、Paletton

网址:http://paletton.com/

设计器工具,用于创建可以很好地协同工作的颜色组合。

38、Pesticide

网址:http://pesticide.io/

使用提纲加速CSS布局调试的工具。

39、PhantomCSS

网址:https://github.com/Huddle/PhantomCSS

PhantomCSS捕获由CasperJS捕获的屏幕截图,并使用Resemble.js将它们与基线图像进行比较,以测试rgb像素差异。然后,PhantomCSS生成图像差异以帮助您找到原因。

40、QUnit

网址:http://qunitjs.com/

QUnit是一个功能强大,易于使用的JavaScript单元测试框架。它由jQuery,jQuery UI和jQuery Mobile项目使用,并且能够测试任何通用的JavaScript代码,包括其自身。

41、Responsinator

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

Responsinator帮助网站制造商快速了解其响应式网站在最受欢迎的设备上的外观。它不能精确地复制外观,因为准确的测试总是在真实设备上进行测试。

42、Responsive

网址:http://responsive.victorcoulon.fr/

用于响应式设计测试的便捷工具。

43、Responsive Design Testing

网址:http://mattkersley.com/responsive/

该工具旨在帮助您在设计和构建响应式网站时对其进行测试。您可以在此页面顶部的地址栏中(而不是浏览器的地址栏中)输入网站的URL,以测试特定页面。

44、Retinize

网址:http://retinize.it/

RetinizeIt非常适合需要为iOS或支持Retina的网站的PSD切片UI元素的Web设计人员和前端开发人员。

45、Sass

网址:https://sass-lang.com/

Sass是世界上最成熟,稳定,功能最强大的专业级CSS扩展语言。具有超能力的CSS。

46、Stack Overflow

网址:http://stackoverflow.com/

Stack Overflow是面向专业和发烧级程序员的问答社区网站。而且很大。他们刚刚达到一千万个问题。

47、Sublime Text 3

网址:http://blog.debugme.eu/front-end-web-developer-tools/www.sublimetext.com/3

Sublime Text是一款代码编辑器,标记和散文的高级文本编辑器。

您会喜欢光滑的用户界面,非凡的功能和出色的性能。

48、Type-o-matic

网址:http://type-o-matic.net/

在这里你可找到页面上的所有所需字体。


49、TypeWonder

网址:http://typewonder.com/

TypeWonder可以帮助用户在其网站上检查或测试Google字体,而无需实际更改实时网站上的任何内容。

50、Vue.js

网址:http://vuejs.org/

Vue.js是用于构建现代Web界面的库。它通过简单灵活的API提供了对数据敏感的组件。

51、WebStorm

网址:https://www.jetbrains.com/webstorm/

WebStorm是一个轻量级但功能强大的IDE,非常适合使用Node.js进行复杂的客户端开发和服务器端开发。

52、What Font Is

网址:http://www.whatfontis.com/

使用什么字体,您可以识别所需的字体。

53、Wordmark.it

网址:http://wordmark.it/

Wordmark.it旨在通过快速显示计算机上安装的字体的任何文本的预览来帮助字体选择过程。

54、Yeoman

网址:http://yeoman.io/

Yeoman帮助您启动新项目,规定最佳实践和工具以帮助您保持生产力。快速构建完整的项目或有用的部分。

55、Gulp

网址:http://gulpjs.com/

Gulp是流式构建系统,它是使用Node.js的任务运行程序。您可以使用它构建系统自动化任务,例如缩小和复制所有JavaScript文件或静态图像等。令人敬畏的前端Web开发人员工具。

56、React

网址:http://facebook.github.io/react/

React是一个开放源代码的JavaScript库,用于创建用户界面,旨在解决开发单页应用程序时遇到的挑战。

57、Browserify

网址:http://browserify.org/

Browserify允许您捆绑所有依赖项。

58、Webpack

网址:https://webpack.github.io/

将许多模块打包到少数捆绑资产中,就使用webpack。

59、Babel

网址:https://babeljs.io/

用于编写下一代JavaScript的编译器。每个前端开发人员都应使用。

60、PostCSS

网址:https://github.com/postcss/postcss

PostCSS是使用JavaScript插件转换CSS的工具。

61、cssnext

网址:http://cssnext.io/

cssnext是一个CSS编译器,可让您今天使用最新的CSS语法。它将新的CSS规范转换为更兼容的CSS,因此您无需等待浏览器支持。

62、Visual Studio 2015

网址:https://visualstudio.microsoft.com/zh-hans/vs/

Visual Studio 2015是一个丰富的集成开发环境,用于为Windows,Android和iOS创建出色的应用程序,以及现代Web应用程序和云服务。

63、Can I Use

网址:https://caniuse.com/

兼容性表,用于在各种浏览器中支持HTML5,CSS3,SVG和其他技术。

64、npm

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

npm是Node.js的软件包管理器。它创建于2009年,是一个开源项目,旨在帮助JavaScript开发人员轻松共享打包的代码模块。

65、ECMAScript 6

网址:http://es6-features.org/

ECMAScript带有许多通用数据类型的简写形式,这可以节省您的时间,并使程序更具可读性。

66、Atom

网址:https://atom.io/

Atom是一种文本编辑器,它是一种现代,通俗易懂但易于破解的内核-您可以自定义该工具以执行任何操作,而且还可以高效使用,而无需接触配置文件。

67、MaterializeCSS

网址:https://materializecss.com/

Materialize是基于Google Material Design的现代响应式CSS框架。

68、JSPM

网址:https://jspm.io/

JSPM是SystemJS通用模块加载器的软件包管理器,该软件包管理器基于动态ES6模块加载器构建。

69、Helium CSS

网址:https://github.com/geuis/helium-css

是一种用于发现网站上许多页面上未使用的CSS的工具。该工具基于JavaScript,可从浏览器运行。Helium接受网站不同部分的URL列表,然后加载并解析每个页面以构建所有样式表的列表。然后,它访问URL列表中的每个页面,并检查是否在页面上使用了样式表中找到的选择器。最后,它生成一个报告,其中详细介绍了每个样式表以及未在任何给定页面上使用的选择器。

70、更多插件工具

01)、parallel.js: 前后端通用的一个并行库。

02)、zepto: 用于现代浏览器的兼容 jQuery 的库。

03)、totoro: 稳定的跨浏览器测试工具。

04)、TheaterJS: 一个用于模拟人输入状态的 JS 库。

05)、stellar.js: 前端用于实现异步滚动效果的库,现已不再维护。

06)、skrollr: 另一款实现一步滚动的开源库,使用人数众多,可实现各种狂拽酷炫掉渣天的前端效果,看真相。

07)、regulex: 用于生成 正则表达式 的可视化流程图。

08)、markdown-it: 新型 Markdown 解析器,快速,支持插件。

09)、multiline: 用于 Javascript 中的多行文本,类似于 Ruby 的 HERE Doc。

10)、screenfull.js: 全屏插件,支持各大浏览器。

11)、lunr.js: 类似于 Solr, 但是用于浏览器上的全文搜索引擎,可以为 JSON 创建索引,离线也可以使用。

12)、jquery.hotkeys: jQuery 插件,用于绑定热键。

13)、breach_core: Javascript 编写的 Browser (浏览器)。

14)、octocard: 用于生成 Github 信息卡片的库。

15)、github-cards: 用于生成 Github 信息卡片的库。

16)、money.js: 轻量级货币转换库,web 和 node 皆可用。

17)、accounting.js: 轻量级的数字、货币转换库。

18)、javascript-algorithms: Javascript 实现的各种算法集合。

19)、lazy.js: 类似于 underscore, 但是会延迟执行,某些场景下,性能会有很大的提升。

20)、seajs: 前端模块加载器,解决模块化、依赖等问题。

21)、jQuery-One-Page-Nav: 单页应用中一个用于处理导航栏的库。

22)、js.js: Javascript 实现的 javascript JIT。

23)、jquery-ui: jQuery 团队开发的 UI 相关的前端库,功能强大。

24)、todomvc: 分别基于 AngularJS/EmberJS/Backbone等实现的 TODO List, 帮助开发者选择前端 MVC 库。

25)、localForage: Mozilla 出品,用于离线存储,基于IndexedDB, WebSQL 或者。localStorage, 提供一致的接口。

26)、EventEmitter: 浏览器版的 EventEmitter。

27)、jquery.serializeJSON: jQuery 插件,用于将 form 表单序列化成 JSON 数据。

28)、knockout: 前端 MVVM 框架,用于开发富前端应用。

29)、mermaid: 可以根据文本生成流程图,类似于 Markdown 的语法。

30)、js-sequence-diagrams: 另一款可以根据文本生成流程图的库,类似于 Markdown 的语法。

31)、flow: 一个用来检测 Javascript 语法错误的库, Facebook 出品。

32)、zoomooz: jQuery 插件,用来处理浏览器缩放。

33)、fancyBox: 一个用于放大缩小图片、Web 内容或者多媒体元素的库,优雅大方。

34)、mithril.js: 轻量型前端 MVC 框架,部分使用场景下性能优于 Angular.js 和 React。

35)、jquery.smartbanner: smartbanner 是从 IOS6 开始支持的一个新特性, 这个插件提供了对早期 IOS4/5 和 Android 的支持。

36)、jquery.scrollTo: 在页面上以一个元素为起始以动画的方式移动(ScrollTo)到另一个元素, 支持回退等。

37)、jScrollPane: 自定义的滚动条,让所有浏览器都显示一样的滚动条。

38)、onepage-scroll: 提供类似于 iPhone6 展示页类似的效果,适用于单页应用,兼容到 IE8

39)、scrollMonitor: 前端插件用来监控元素的滚动事件(进入、退出等),性能很好

40)、ScrollMagic: 神奇的滚动交互效果插件,可以在滚动的过程中设置各种各样的动态效果

41)、infinite-scroll: 滚动加载,滚动到最下到自动加载, Paul Irish 大神之作

42)、animatable: 仅仅依靠 border-width 和 background-position 实现的各种动态效果,看真相

43)、Fluidbox: 页面上内嵌图片的放大缩小效果,类似于 Medium 中的效果

44)、jquery-validation: jQuery 的一个插件,用于校验 Form 表单

45)、BigVideo.js: jQuery 的一个插件, 用于实现大背景(视频、图片)效果

46)、emscripten: 一款基于 LLVM, 可以将 C/C++ 转换成 Javascript 的工具,使得 Javascript 可以近乎 Native 的速度

47)、qrcode-generator: 各种语言的二维码生成工具

48)、device.js: 一个可以检测设备类型的工具,可以让我们根据不同的设备来为其定制响应的 Javascript 和 CSS

49)、jquery-qrcode: jQuery 插件,用来生成二维码

50)、Wookmark-jQuery: jQuery 的一个插件,可以用来实现瀑布流的效果

51)、isotope: 可以用来过滤、排列布局,实现美观的动态布局切换效果,Demo

52)、lazysizes: 功能强大的图片延迟加载工具,可以首先加载一个低质量的图片,然后再加载高质量的图片

53)、progressbar.js: 简洁美观的进度条,扁平化

54)、pigshell: 一个由 Javascript 实现的Shell, 将互联网当做一个大的文件系统, 通过 cd/ls/cat…..等命令, 可以访问 Facebook/Twitter/Google Drive 等网络服务

55)、spectrum: Js实现的颜色选择器 (Colorpicker)

56)、jQuery.countdown: jQuery 倒计时插件

57)、summernote: WYSIWYG 富文本编辑器

58)、awesomplete: 非常轻型的一个自动补全 JS 库, 没有任何依赖, 配置简单, 美观

59)、switchery: IOS 7 上 Switch 的 JS 实现, 支持 IE8 及以上浏览器

60)、trix: Basecamp 公司出品的富文本编辑器,简洁小巧

61)、sensor.js: 在智能移动设备浏览器上,通过HTML5的api使用移动设备的功能。定位、运动、倾斜等

62)、hyhyhy: 用于创建 基于 HTML5 的 演示文稿

63)、swipebox: jQuery 插件,用于处理移动端的触摸事件

64)、FileAPI: 前端用户处理文件(拖放、多文件上传等)

65)、Sortable: 现代浏览器上用于实现元素拖拽排序的功能,支持 Meteor, AngularJS, React,不依赖 jQuery

66)、Swiper: 用于实现浏览器上的滑动切换效果,支持硬件加速

67)、matter-js: 2D 物理效果引擎,碰撞、弹跳等

68)、jQTouch: 用于辅助创建手机端的 Web 应用,支持主题、Zepto.js 等

69)、snabbt.js: 一个利用 Javascript 和 CSS transform 的 animation 库

70)、c3: 基于 D3 的图表库

71)、echarts: 企业级图表库,百度开发

72)、parallax.js: 一个用于响应智能手机 orientation 的库

73)、jQuery-Animate-Enhanced: jQuery 动画库的一个增强,用于现代浏览器

74)、wysihtml: 富文本编辑器,适用于现代浏览器

75)、slip: 一个通过滑动或者拖拽来操控列表的库

76)、evil-icons: 一个矢量图库,提供 Ruby/Node 等支持

77)、PhotoSwipe: JS 的一个图片展示库

78)、focusable: 是页面上一个元素高亮的库,有图有真相

79)、firefox.html: Firefox 在浏览器端的实现 —— HTML 版的 Firefox

80)、jquery-mobile: jQuery 团队开发的用于辅助手机端 web app 开发的库,基于 HTML5

81)、mobile-angular-ui: 基于angularjs和bootstarp的web app开发框架

82)、interact.js: 一个适用于现代浏览器的,用于处理 手势、拖放、缩放等的库

83)、rebound-js: 实现部分物理效果,Facebook 出品

84)、basket.js: 基于 LocalStorage 的资源加载器,可以用来缓存 script 和 css, 手机端使用速度快于浏览器直接缓存

85)、iscroll: 高性能的滚动(scroll)处理库,功能强大,支持各种事件,不依赖任何的库,且插件丰富, 大众点评的手机端列表滚动就是用这个库处理的

86)、metrics-graphics: 基于 D3 的图表库,简洁、高效,Mozilla 出品

87)、accessible-html5-video-player: Paypal 出品的 Video 播放器

88)、loading: 几种 Loading 效果,基于 SVG

89)、flippant.js: 一款能够漂亮的网页元素翻转效果库,代码许久不更新,不过作为源码学习还是不错的

90)、move.js: 基于 CSS3 的前端动画框架

91)、scrollReveal.js: 使元素以非常酷帅的方式进入画布 (Viewpoint),看 Demo

92)、Modernizr: 一个用来检测 HTML5 和 CSS3 支持情况的库

93)、foundation: 另一款前端模版框架,类似于 Bootstrap

94)、Flat-UI: Bootstrap 的一款主题,简洁美观

95)、iCheck: 一款漂亮的 Checkbox 插件

96)、Swipe: 非常轻量级的一个图片滑动切换效果库, 性能良好, 尤其是对手机的支持, 压缩后的大小约 5kb

97)、slick: 功能异常强大的一个图片滑动切换效果库

98)、SocialButtons: 漂亮的社交按钮

99)、sweetalert: 一个非常美观的用于替换浏览器默认 alert 的库

100)、web-animations-js: Javascript 实现的 Web Animation API

101)、vivus: 可以动态描绘 SVG 的 JS 库, 支持多种动画

102)、plyr: 轻量, 小巧, 美观的 HTML5 视频播放器

103)、timesheet.js: 基于 HTML5 & CSS3 时间表

104)、slideout: 一个非常美观的侧滑菜单

以上内容来源于web前端开发 ,作者web前端开发

I组件

  • element - 饿了么出品的Vue2的web UI工具套件
  • Vux - 基于Vue和WeUI的组件库
  • mint-ui - Vue 2的移动UI元素
  • iview - 基于 Vuejs 的开源 UI 组件库
  • Keen-UI - 轻量级的基本UI组件合集
  • vue-material - 通过Vue Material和Vue 2建立精美的app应用
  • muse-ui - 三端样式一致的响应式 UI 库
  • vuetify - 为移动而生的Vue JS 2组件框架
  • vonic - 快速构建移动端单页应用
  • eme - 优雅的Markdown编辑器
  • vue-multiselect - Vue.js选择框解决方案
  • vue-table - 简化数据表格
  • VueCircleMenu - 漂亮的vue圆环菜单
  • vue-chat - vuejs和vuex及webpack的聊天示例
  • radon-ui - 快速开发产品的Vue组件库
  • vue-waterfall - Vue.js的瀑布布局组件
  • vue-carbon - 基于 vue 开发MD风格的移动端
  • vue-beauty - 由vue和ant design创建的优美UI组件
  • vue-blu - 帮助你轻松创建web应用
  • vueAdmin - 基于vuejs2和element的简单的管理员模板
  • vue-syntax-highlight - Sublime Text语法高亮
  • vue-infinite-scroll - VueJS的无限滚动指令
  • Vue.Draggable - 实现拖放和视图模型数组同步
  • vue-awesome-swiper - vue.js触摸滑动组件
  • vue-calendar - 日期选择插件
  • bootstrap-vue - 应用于Vuejs2的Twitter的Bootstrap 4组件
  • vue-swipe - VueJS触摸滑块
  • vue-amap - 基于Vue 2和高德地图的地图组件
  • vue-chartjs - vue中的Chartjs的封装
  • vue-datepicker - 日历和日期选择组件
  • markcook - 好看的markdown编辑器
  • vue-google-maps - 带有双向数据绑定Google地图组件
  • vue-progressbar - vue轻量级进度条
  • vue-picture-input - 移动友好的图片文件输入组件
  • vue-infinite-loading - VueJS的无限滚动插件
  • vue-upload-component - Vuejs文件上传组件
  • vue-datetime-picker - 日期时间选择控件
  • vue-scroller - Vonic UI的功能性组件
  • vue2-calendar - 支持lunar和日期事件的日期选择器
  • vue-video-player - VueJS视频及直播播放器
  • vue-fullcalendar - 基于vue.js的全日历组件
  • rubik - 基于Vuejs2的开源 UI 组件库
  • VueStar - 带星星动画的vue点赞按钮
  • vue-mugen-scroll - 无限滚动组件
  • mint-loadmore - VueJS的双向下拉刷新组件
  • vue-tables-2 - 显示数据的bootstrap样式网格
  • vue-virtual-scroller - 带任意数目数据的顺畅的滚动
  • DataVisualization - 数据可视化
  • vue-quill-editor - 基于Quill适用于Vue2的富文本编辑器
  • Vueditor - 所见即所得的编辑器
  • vue-html5-editor - html5所见即所得编辑器
  • vue-msgbox - vuejs的消息框
  • vue-slider - vue 滑动组件
  • vue-core-image-upload - 轻量级的vue上传插件
  • vue-slide - vue轻量级滑动组件
  • vue-lazyload-img - 移动优化的vue图片懒加载插件
  • vue-drag-and-drop-list - 创建排序列表的Vue指令
  • vue-progressive-image - Vue的渐进图像加载插件
  • vuwe - 基于微信WeUI所开发的专用于Vue2的组件库
  • vue-dropzone - 用于文件上传的Vue组件
  • vue-charts - 轻松渲染一个图表
  • vue-swiper - 易于使用的滑块组件
  • vue-images - 显示一组图片的lightbox组件
  • vue-carousel-3d - VueJS的3D轮播组件
  • vue-region-picker - 选择中国的省份市和地区
  • vue-typer - 模拟用户输入选择和删除文本的Vue组件
  • vue-impression - 移动Vuejs2 UI元素
  • vue-datatable - 使用Vuejs创建的DataTableView
  • vue-instant - 轻松创建自动提示的自定义搜索控件
  • vue-dragging - 使元素可以拖拽
  • vue-video - Vue.js的HTML5视频播放器
  • vue-toast-mobile - VueJS的toast插件
  • vue-image-crop-upload - vue图片剪裁上传组件
  • vue-tooltip - 带绑定信息提示的提示工具
  • vue-datasource - 创建VueJS动态表格
  • vue2-timepicker - 下拉时间选择器
  • vue-date-picker - VueJS日期选择器组件
  • vue-scrollbar - 最简单的滚动区域组件
  • vue-quill - vue组件构建quill编辑器
  • vue-google-signin-button - 导入谷歌登录按钮
  • vue-svgicon - 创建svg图标组件的工具
  • vue-float-label - VueJS浮动标签模式
  • vue-baidu-map - 基于 Vue 2的百度地图组件库
  • vue-social-sharing - 社交分享组件
  • vue2-editor - HTML编辑器
  • vue-tagsinput - 基于VueJS的标签组件
  • vue-easy-slider - Vue 2.x的滑块组件
  • datepicker - 基于flatpickr的时间选择组件
  • vue-chart - 强大的高速的vue图表解析
  • vue-music-master - vue手机端网页音乐播放器
  • handsontable - 网页表格组件
  • vue-simplemde - VueJS的Markdown编辑器组件
  • vue-popup-mixin - 用于管理弹出框的遮盖层
  • cubeex - 包含一套完整的移动UI
  • vue-fullcalendar - vue FullCalendar封装
  • vue-material-design - Vue MD风格组件
  • vue-morris - Vuejs组件封装Morrisjs库
  • we-vue - Vue2及weui1开发的组件
  • vue-image-clip - 基于vue的图像剪辑组件
  • vue-bootstrap-table - 可排序可检索的表格
  • vue-radial-progress - Vue.js放射性进度条组件
  • vue-slick - 实现流畅轮播框的vue组件
  • vue-pull-to-refresh - Vue2的上拉下拉
  • vue-form-2 - 全面的HTML表单管理的解决方案
  • vue-side-nav - 响应式的侧边导航
  • mint-indicator - VueJS移动加载指示器插件
  • chartjs - Vue Bulma的chartjs组件
  • vue-scroll - vue滚动
  • vue-ripple - 制作谷歌MD风格涟漪效果的Vue组件
  • vue-touch-keyboard - VueJS虚拟键盘组件
  • vue-chartkick - VueJS一行代码实现优美图表
  • vue-ztree - 用 vue 写的树层级组件
  • vue-m-carousel - vue 移动端轮播组件
  • vue-datepicker-simple - 基于vue的日期选择器
  • vue-tabs - 多tab页轻型框架
  • vue-verify-pop - 带气泡提示的vue校验插件
  • vue-parallax - 整洁的视觉效果
  • vue-img-loader - 图片加载UI组件
  • vue-typewriter - vue组件类型
  • vue-smoothscroll - smoothscroll的VueJS版本
  • vue-city - 城市选择器
  • vue-tree - vue树视图组件
  • vue-ios-alertview - iOS7+ 风格的alertview服务
  • dd-vue-component -订单来了的公共组件库
  • paco-ui-vue - PACOUI的vue组件
  • vue-cmap - Vue China map可视化组件
  • vue-button - Vue按钮组件

开发框架

  • vue.js - 流行的轻量高效的前端组件化方案
  • vue-admin - Vue管理面板框架
  • electron-vue - Electron及VueJS快速启动样板
  • vue-2.0-boilerplate - Vue2单页应用样板?
  • vue-spa-template - 前后端分离后的单页应用开发
  • Framework7-Vue - VueJS与Framework7结合
  • vue-bulma - 轻量级高性能MVVM Admin UI框架
  • vue-webgulp - 仿VueJS Vue loader示例
  • vue-element-starter - vue启动页

实用库

  • vuex - 专为 Vue.js 应用程序开发的状态管理模式
  • vuelidate - 简单轻量级的基于模块的Vue.js验证
  • qingcheng - qingcheng主题
  • vue-desktop - 创建管理面板网站的UI库
  • vue-meta - 管理app的meta信息
  • vue-axios - 将axios整合到VueJS的封装
  • vue-svg-icon - vue2的可变彩色svg图标方案
  • avoriaz - VueJS测试实用工具库
  • vue-framework7 - 结合VueJS使用的Framework7组件
  • vue-bootstrap-modal - vue的Bootstrap样式组件
  • vuep - 用实时编辑和预览来渲染Vue组件
  • vue-online - reactive的在线和离线组件
  • vue-lazy-render - 用于Vue组件的延迟渲染
  • vue-password-strength-meter - 交互式密码强度计
  • element-admin - 支持 vuecli 的 Element UI 的后台模板
  • vue-electron - 将选择的API封装到Vue对象中的插件
  • cleave - 基于cleave.js的Cleave组件
  • vue-events - 简化事件的VueJS插件
  • vue-shortkey - 应用于Vue.js的Vue-ShortKey 插件
  • vue-cordova - Cordova的VueJS插件
  • vue-router-transition - 页面过渡插件
  • vue-gesture - VueJS的手势事件插件
  • http-vue-loader - 从html及js环境加载vue文件
  • vue-qart - 用于qartjs的Vue2指令
  • vuemit - 处理VueJS事件
  • vue-websocket - VueJS的Websocket插件
  • vue-local-storage - 具有类型支持的Vuejs本地储存插件
  • lazy-vue - 懒加载图片
  • vue-bus - VueJS的事件总线
  • vue-reactive-storage - vue插件的Reactive层
  • vue-notifications - 非阻塞通知库
  • vue-lazy-component - 懒加载组件或者元素的Vue指令
  • v-media-query - vue中添加用于配合媒体查询的方法
  • vue-observe-visibility - 当元素在页面上可见或隐藏时检测
  • vue-ts-loader - 在Vue装载机检查脚本
  • vue-pagination-2 - 简单通用的分页组件
  • vuex-i18n - 定位插件
  • Vue.resize - 检测HTML调整大小事件的vue指令
  • vuex-shared-mutations - 分享某种Vuex mutations
  • vue-file-base64 - 将文件转换为Base64的vue组件
  • modal - Vue Bulma的modal组件
  • Famous-Vue - Famous库的vue组件
  • leo-vue-validator - 异步的表单验证组件
  • Vue-Easy-Validator - 简单的表单验证
  • vue-truncate-filter - 截断字符串的VueJS过滤器
  • vue-zoombox - 一个高级zoombox
  • vue-input-autosize - 基于内容自动调整文本输入的大小
  • vue-lazyloadImg - 图片懒加载插件

服务端

  • nuxt.js - 用于服务器渲染Vue app的最小化框架
  • express-vue - 简单的使用服务器端渲染vue.js
  • vue-ssr - 非常简单的VueJS服务器端渲染模板
  • vue-easy-renderer - Nodejs服务端渲染

应用实例

  • koel - 基于网络的个人音频流媒体服务
  • pagekit - 轻量级的CMS建站系统
  • vuedo - 博客平台
  • jackblog-vue - 个人博客系统
  • vue-cnode - 重写vue版cnode社区
  • CMS-of-Blog - 博客内容管理器
  • rss-reader - 简单的rss阅读器
  • vue-ghpages-blog - 依赖GitHub Pages无需本地生成的静态博客
  • swoole-vue-webim - Web版的聊天应用
  • vue-dashing-js - nuvo-dashing-js的fork
  • fewords - 功能极其简单的笔记本
  • vue-blog - 使用Vue2.0 和Vuex的vue-blog

编辑器效果,太辣眼。。。。。。

UI组件


开发框架


实用库


服务端


应用实例


方便复制

ue.js

Vue.js 是一个免费且紧凑的开源库,可快速构建用户界面(尤其是单页 Web 应用程序)。尤雨溪于 2014 年开发 Vue.js,在 2019 年前端框架排名中获得第 2 名,2020年09月18日 Vue.js 3.0 正式发布,主推微软 TypeScript 语言编程。

Vue 中文学习资料和视频教程都非常齐全,在国内是第一人气前端框架。阿里巴巴和GiteLab都在使用Vue


React

React 是一款开源 JavaScript 库,用于构建 Web 界面。其特点是轻量级,独立,可重用创建前端UI代码。目前由 Facebook 维护和开发React,因此你不必担心React的安全性。 Facebook、Twitter、Netflix、WhatsApp 等大公司都在使用React。


AngularJS

AngularJS 与 React 和 Vue 两个框架差不多,可轻松构建网页和移动应用程序。受到谷歌、福布斯、IBM、微软等众多大公司的青睐。


jQuery

jQuery 是一款轻量化、免费、开源的库,也是最早的前端库之一,为开发提供了许多功能,例如 AJAX、操作 DOM(CSS、HTML)、处理事件、动画效果等。


Lodash

Lodash 可轻松处理 JavaScript 中与数组、字符串、数字、对象相关的问题。


Anime.js

Anime.js 是一个处理动画的库,利用 CSS 属性、SVG、DOM 属性、JavaScript 对象等,可快速构建动画。


AOS

AOS 可在用户滚动网页时为网站元素创建动画效果。


Popper

Popper 库只有3kB 左右大小,有了它可以提高网站速度,常和时下流行的 Bootstrap、Foundation、Material-UI等合并使用。


Owl Carousel 2

Owl Carousel 2 是一个开源库,可轻松实现轮播效果。Owl Carousel 2拥有超过 60 种不同类型的轮播样式,具有自动播放功能、视频可用性、自定义运动效果等设定。


D3.js

D3.js 利用 SVG、Canvas、HTML 进行数据可视化和渲染。每周 通过 npm 下载都会超过 100 万次以上。但其缺点是,初学者上手有难度,也不支持IE8 等较旧的浏览器。


DarkModeJS

DarkModeJS 是实现夜间模式的库。可创建CSS样式文件,然后由用户切换到所需模式。


eChart.js

数据可视化的图表库。


SweetAlert

SweetAlert 是一款高效且美观的网站通知库。


Highlight.js

Highlight.js 是一款突出显示文字的库,其优势是,独立于任何框架;能够自动检测您网站上的语言;支持超过 189 种流行的编程语言;提供了 94 种以上的样式。


VideoJS

VideoJS 是基于 HTML5 视频平台构建的视频播放器,支持多种格式,例如 YouTube 和 Vimeo 流媒体。其开发于 2010 年左右。其优点:设计美观,多种样式主题,可在电脑和手机上运行。


Moment.js

利用 Moment.js 处理日期和时间变得容易。


PixiJS

利用最快速、最灵活的 2D WebGL 渲染器构建的数字内容。


Webpack

Webpack 静态模块打包工具。


fullPage.js

fullPage.js 可为网站创建全屏滚动。


Howler.js

Howler.js 只有 7KB 大小,可处理网页音频。通过 API 和 HTML5 Audio 的结合,可运行在许多平台和网络浏览器上,包括 IE9 和 Cordova。Howler.js 的优点:支持众多的文件类型,如 MP3、MPEG、OPUS、OGG、OGA、WAV、AAC、CAF、M4A 等,其自动缓存有助于提高网站的性能以及服务器的带宽。


Masonry

可创建复杂的网格布局。


Screenfull

Screenfull 有助于将元素或网页转换为全屏模式。


particles.js

Particles.js 可为网站创建和优化漂亮的背景。


Leaflet

Leaflet 用于与移动设备上的地图进行交互。


SortableJS

SortableJS 可为 HTML5 添加拖放功能。


Clipboard.js

Clipboard.js 可以快速将网页内容复制到剪贴板。


Underscore.js

Underscore.js 提供了 100 多个函数,支持您最喜欢的日常功能助手:map、filter、invoke等。


Cleave.js

input当用户输入信息时,Cleave 可以很容易地重新格式化元素。


Share

Share库可轻松实现分享功能。


Chardin.js

Chardin.js 库可在网页上显示组件的说明。


Flip

Flip 可轻松地创建翻转效果的计数器。


Image Compare Viewer

Image Compare Viewer 可实现在网页上比较两个图像的功能。


Notyf

Notyf 仅有3KB大小,用于创建 Toast 通知。易于与流行的 JS 框架(如 React、Angular、Aurelia、Vue 和 Svelte)一起使用。


Dinero.js

Dinero.js 提供与货币相关的功能。


SimpleParallax.js

SimpleParallax.js 用于创建简单易行的视差效果。


Duet Date Picker

Duet Date Picker 是由 Duet Design Systems 开发的开源代码。实现日期选择器组件的功能。


Print.js

Print.js 是一款打印库,其支持多种格式的打印,例如 PDF、HTML(例如表单)、图像、JSON 等。此外,可以大多数流行的浏览器上运行,例如 Chrome、Firefox、Safari、Edge 和 Opera。


Mathjs

Mathjs 是一款开源数学库,在 Github 上为 JavaScript 和 Node.js 拥有超过 10.5 万颗星。其可灵活计算和处理许多不同的数据类型,例如数字、大数、复数、分数、单位和矩阵等。


PROGRESSBAR

PROGRESSBAR 是一款进度条的库。


Quill

Quill 一款强大的富文本编辑器。


VALIDATE.JS

VALIDATE.JS 提供验证功能的库。


Mocha

Mocha 是一款功能丰富的 JavaScript 测试框架。


最后

希望这篇文章能为那些前端开发的工程师带来帮助。

不要忘了关注我的频道,祝大家好运!