<p>对于开发者而言，想要着手前端开发，HTML、CSS 和 JavaScript 是三项必备的基础技能。而如何事半功倍地掌握好这些知识？通过了解当下火热的开源项目不乏为最佳学习姿势。本文盘点国内评分最高且收藏量超过 100 的前端技术开源项目，希望可以帮助更多的开发者扩展学习。</p>    <p><strong>1.极简模块化前端UI框架 Layui</strong></p>    <p>评分：9.3；收藏量：873</p>    <p>授权协议：MIT</p>    <p>开发语言：JavaScript、HTML/CSS</p>    <p>操作系统：跨平台</p>    <p>源码地址： <a href="/misc/goto?guid=4959755046284010756" rel="nofollow,noindex">https://gitee.com/sentsin/layui</a></p>    <p>Layui 是一款采用自身模块规范编写的情怀型前端UI框架，遵循原生HTML/CSS/JS的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到API的每一处细节都经过精心雕琢，非常适合界面的快速开发。Layui 首个版本发布于2016年金秋，她区别于那些基于MVVM底层的UI框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，她更多是为服务端程序员量身定做，你无需涉足各种前端工具的复杂配置，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/d3df0427a7ab31daf28e79c50519c415.jpg"></p>    <p><strong>2.JavaScript 图表库 ECharts</strong></p>    <p>评分：8.9；收藏量：2448</p>    <p>授权协议：BSD</p>    <p>开发语言：JavaScript</p>    <p>操作系统：跨平台</p>    <p>源码地址： <a href="/misc/goto?guid=4959755046368457853" rel="nofollow,noindex">https://gitee.com/echarts/echarts</a></p>    <p>ECharts是一款由百度前端技术部开发的，基于Javascript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。提供大量常用的数据可视化图表，底层基于ZRender（一个全新的轻量级canvas类库），创建了坐标系，图例，提示，工具箱等基础组件，并在此上构建出折线图（区域图）、柱状图（条状图）、散点图（气泡图）、饼图（环形图）、K线图、地图、力导向布局图以及和弦图，同时支持任意维度的堆积和多图表混合展现。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/772501c3ec24bf00d0c0aaa031a56652.jpg"></p>    <p><strong>3.国产跨屏响应式前端框架 拼图 Pintuer</strong></p>    <p>评分：8.7；收藏量：220</p>    <p>授权协议：Apache</p>    <p>开发语言：JavaScript、HTML/CSS</p>    <p>操作系统：跨平台</p>    <p>源码地址： <a href="/misc/goto?guid=4959755046463457279" rel="nofollow,noindex">https://gitee.com/pintuer/pintuer</a></p>    <p>拼图 Pintuer.com：国内优秀的HTML、CSS、JS跨屏响应式开源前端框架，使用最新浏览器技术，为快速的前端开发提供一系统的文本、图标、媒体、表格、表单、按钮、菜单、网格系统等样式工具包，占用资源小，使用拼图可以快速构建简洁、优雅而且自动适应手机、平板、桌面电脑等设备的前端界面，让前端开发像玩游戏一下快乐而轻松。</p>    <p>拼图前端框架在传统CSS框架的基本上，增加了HTML5、CSS3、JS等技术组合应用，应用于最新的浏览器技术，同时兼容较早的浏览器，新旧结合，承前启后，开发者只需把框架文件引入到项目中，就可以初现快速的共同开发，改变以往建立PC网站同时，再建立手机网站的局面，实现一站响应所有设备，大大提高了开发效率。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/634f5b7f17b8020c988d6548e20ee267.jpg"></p>    <p><strong>4.轻量级 Material Design 前端框架 MDUI</strong></p>    <p>评分：8.6；收藏量：215</p>    <p>授权协议：MIT</p>    <p>开发语言：JavaScript、HTML/CSS</p>    <p>操作系统：跨平台</p>    <p>源码地址： <a href="/misc/goto?guid=4959732975121525185" rel="nofollow,noindex">https://github.com/zdhxiong/mdui</a></p>    <p>MDUI 是一个轻量级的 Material Design 前端框架，对照着 Material Design 文档进行开发，争取 1:1 实现 Material Design 中的组件。</p>    <ul>     <li>多主题支持：MDUI 拥有 19 种主色、 16 种强调色、和一种夜间主题。只需添加一个 CSS 类即可实现主题的切换。</li>     <li>轻量级：包含所有主题的 CSS 文件仅 26.4KB minified + gzip，JavaScript 文件仅 12KB minified + gzip，且没有任何依赖</li>     <li>响应式：移动优先，可适配所有屏幕。</li>    </ul>    <p><strong>5.Win10 风格的前端响应式 UI 框架 Win10-UI</strong></p>    <p>评分：8.5；收藏量：170</p>    <p>授权协议：SATA</p>    <p>开发语言：JavaScript、HTML/CSS</p>    <p>操作系统：跨平台</p>    <p>源码地址： <a href="/misc/goto?guid=4959755046568918246" rel="nofollow,noindex">https://github.com/yuri2peter/win10-ui</a></p>    <p>Win10-UI是一款win10风格的后台UI框架。它使用了丰富的win10桌面元素，包括桌面图标、窗口化子页面管理、开始菜单、动态小磁贴等组件，兼容主流现代浏览器及移动端的屏幕尺寸，适合快速开发后台管理系统的前端界面。</p>    <p>Win10-UI采用传统UI框架的渲染设计，无序记住繁复的js代码，只需要套用html结构就可以轻松渲染出桌面元素。同时也保留了主动调用的API，让高级开发者可以定义UI的细节。它并没有定义太多的“规则”，你完全可以用css、js扩充它的功能，把它打造成属于你的独一无二的后台UI。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/274e22cafcc9a6704984aa495379c7ca.gif"></p>    <p><strong>6.Node 终端界面库 blessed-contrib</strong></p>    <p>评分：8.5；收藏量：125</p>    <p>授权协议：MIT</p>    <p>开发语言：JavaScript</p>    <p>操作系统：跨平台</p>    <p>源码地址： <a href="/misc/goto?guid=4958976764880876102" rel="nofollow,noindex">https://github.com/yaronn/blessed-contrib</a></p>    <p>blessed-contrib 是使用 Node.js 构建终端应用界面的库。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/fdb11c27d0d54632fe98bb0ed2c7d72a.gif"></p>    <p><strong>7.基于 React 和 Redux 的现代内容编辑器 ORY Editor</strong></p>    <p>评分：8.3；收藏量：109</p>    <p>授权协议：AGPL</p>    <p>开发语言：JavaScript</p>    <p>操作系统：跨平台</p>    <p>源码地址： <a href="/misc/goto?guid=4959755046685198818" rel="nofollow,noindex">https://github.com/ory/editor</a></p>    <p>ORY 是一家构建和维护开发者工具的公司，ORY Editor 是一个用于 Web 的智能、可扩展和现代的编辑器（“WYSIWYG”），使用 React 编写。如果你厌倦了 contenteditable 的限制，这将是不错的选择。</p>    <p>ORY Editor 可用于创建网站，与 Squarespace 类似，不过它可以离线运行，通过它创建的网站会存储在设备上，还可以创建自己的设计和插件。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/474d6caaf1fd862f1de3bcd468853bd1.jpg"></p>    <p><strong>8.移动应用动画效果框架 Lottie</strong></p>    <p>评分：8.3；收藏量：317</p>    <p>授权协议：Apache</p>    <p>开发语言：Java、Objective-C、JavaScript</p>    <p>操作系统：Android</p>    <p>源码地址：</p>    <ul>     <li>Android : <a href="/misc/goto?guid=4959736028168964770" rel="nofollow,noindex">https://github.com/airbnb/lottie-android</a></li>     <li>iOS : <a href="/misc/goto?guid=4959736028255386307" rel="nofollow,noindex">https://github.com/airbnb/lottie-ios</a></li>     <li>React Native : <a href="/misc/goto?guid=4959736028344705166" rel="nofollow,noindex">https://github.com/airbnb/lottie-react-native</a></li>    </ul>    <p>Lottie 是 Airbnb 开发的一款能够为原生应用添加动画效果的开源工具。Lottie 目前提供了 iOS、Android 和 React Native 版本，能够实时渲染 After Effects 动画特效。</p>    <p>目前，Lottie支持路径修剪、蒙版、遮盖等操作。此外还有一个可选的缓存机制，对那些频繁使用的东西能够更快加载。这款应用的目标就是帮助开发者和动画师能够更轻松的为应用创建动画，从而在整体上提升互动因素。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/f7dbcabe3ed9a34d5a73a2d5800dd0cb.gif"></p>    <p><strong>9.主题优化包 JQuery EasyUI 1.5.x Of Insdep Theme</strong></p>    <p>评分：8.3；收藏量：101</p>    <p>授权协议：GPL</p>    <p>开发语言：JavaScript</p>    <p>操作系统：跨平台</p>    <p>源码地址： <a href="/misc/goto?guid=4959755046856195114" rel="nofollow,noindex">https://gitee.com/weavors/JQuery-EasyUI-1.5.x-Of-Insdep-Theme</a></p>    <p>Insdep theme是基于EasyUI 1.5.x 的一款免费的美化主题包，拥有百度编辑器、cropper、Highcharts、justgage、plupload等各类适应本主题的第三方插件美化补丁。并且各类常用Jquery插件正在美化中。后期会提供更多的主题、组件及第三方插件美化样式。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/764c6303fb0e58717c46ba01f7244a61.gif"></p>    <p><strong>10.基于 Ueditor 的现代化富文本编辑器 Neditor</strong></p>    <p>评分：8.3；收藏量：503</p>    <p>授权协议：MIT</p>    <p>开发语言：JavaScript</p>    <p>操作系统：跨平台</p>    <p>源码地址： <a href="/misc/goto?guid=4959755046939454253" rel="nofollow,noindex">https://gitee.com/notadd/neditor</a></p>    <p>百度前端团队做了许多努力，现在 Ueditor 是公认最好用的中文富文本编辑器。但是随着时间的推移，大家感觉百度编辑器并不是那么漂亮。于是我们对 Ueditor 进行修改，有了现在的 Neditor 。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/1e870704d422974210a567ca22bc020b.jpg"></p>    <p><strong>11.基于 Vue.js 的 UI 组件库 iView</strong></p>    <p>评分：8.3；收藏量：475</p>    <p>授权协议：MIT</p>    <p>开发语言：HTML/CSS</p>    <p>操作系统：跨平台</p>    <p>源码地址： <a href="/misc/goto?guid=4959755047026840510" rel="nofollow,noindex">https://gitee.com/icarusion/iview</a></p>    <p>iView 是一套基于 Vue.js 的 UI 组件库，主要服务于 PC 界面的中后台产品。</p>    <p>特性</p>    <p><img src="https://simg.open-open.com/show/a39db57bca2f1010f53df8aba979ef3e.jpg"></p>    <ul>     <li>高质量、功能丰富</li>     <li>友好的 API ，自由灵活地使用空间</li>     <li>使用单文件的 Vue 组件化开发模式</li>     <li>基于 npm + webpack + babel 开发，支持 ES2015</li>    </ul>    <p><strong>12.基于 Vue 2.0 的组件库 Element</strong></p>    <p>评分：8.2；收藏量：609</p>    <p>授权协议：MIT</p>    <p>开发语言：JavaScript</p>    <p>操作系统：跨平台</p>    <p>源码地址： <a href="/misc/goto?guid=4959740436179943323" rel="nofollow,noindex">https://github.com/ElemeFE/element</a></p>    <p>Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助你的网站快速成型。由饿了么公司前端团队开源。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/c50d6dd413966b9adecae3f1d7ae5db6.jpg"></p>    <p><strong>13.HTML5 跨屏前端框架 Amaze UI</strong></p>    <p>评分：8.1；收藏量：1213</p>    <p>授权协议：MIT</p>    <p>开发语言：JavaScript、HTML/CSS</p>    <p>操作系统：跨平台</p>    <p>源码地址： <a href="/misc/goto?guid=4959755047129850368" rel="nofollow,noindex">https://gitee.com/amazeui/amazeui</a></p>    <p>Amaze UI采用国际最前沿的“组件式开发”以及“移动优先”的设计理念，基于其丰富的组件，开发者可通过简单拼装即可快速构建出HTML5网页应用，上线仅半年，Amaze UI就成为了国内最流行的前端框架，目前在Github上收获Star数近万，服务于全球50W开发者。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/3598839eeaabdf3cd2dde4e563051502.jpg"></p>    <p><strong>14.专为微信设计的 UI 库 WeUI</strong></p>    <p>评分：7.7；收藏量：2002</p>    <p>授权协议：MIT</p>    <p>开发语言：JavaScript、HTML/CSS</p>    <p>操作系统：跨平台</p>    <p>WeUI 是由微信官方设计团队专为微信移动 Web 应用设计的 UI 库。</p>    <p>WeUI 是一套同微信原生视觉体验一致的基础样式库，为微信 Web 开发量身设计，可以令用户的使用感知更加统一。包含button、cell、dialog、toast、article、icon等各式元素。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/063d96add89fd1fcff718f0fa635229c.png"></p>    <p><strong>15.仪表盘 WebApp 模板 AdminLTE</strong></p>    <p>评分：7.6；收藏量：136</p>    <p>授权协议：MIT</p>    <p>开发语言：JavaScript、HTML/CSS</p>    <p>操作系统：跨平台</p>    <p>源码地址： <a href="/misc/goto?guid=4959755047214356565" rel="nofollow,noindex">https://github.com/almasaeed2010/AdminLTE/</a></p>    <p>AdminLTE 是受欢迎的开源的管理仪表盘和控制面板的WebApp模板。它是基于Bootstrap 3的CSS框架，反应灵敏的HTML模板。利用所有Bootstrap的组件对大部分使用插件进行设计和调整风格，创建出可以用作后端应用程序的用户界面一致性设计。AdminLTE是基于模块化设计，很容易在其之上定制和重制。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/57e2f4e73b925b74a2942ab9e6acdedf.jpg"></p>    <p><strong>16.web上线部署系统工具 Walle</strong></p>    <p>评分：7.4；收藏量：359</p>    <p>授权协议：MIT</p>    <p>开发语言：PHP、HTML/CSS</p>    <p>操作系统：跨平台</p>    <p>Walle 一个web部署系统工具，配置简单、功能完善、界面流畅、开箱即用！支持git、svn版本管理，支持各种web代码发布，PHP，Python，JAVA等代码的发布、回滚，可以通过web来一键完成。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/9cc1dd9a853b37201ae91e94cc7b346c.gif"></p>    <p><strong>17.网站管理后台模板 Charisma</strong></p>    <p>评分：7.4；收藏量：1055</p>    <p>授权协议：Apache</p>    <p>开发语言：HTML/CSS</p>    <p>操作系统：跨平台</p>    <p>Charisma 是基于 推ter Bootstrap 制作的响应式网站管理后台模板，包含9套漂亮的主题。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/1ebe6e3fb465d1e653e30c7869c7e6eb.png"></p>    <p><strong>18.开源看板管理系统 LibreBoard</strong></p>    <p>评分：7.4；收藏量：380</p>    <p>授权协议：MIT</p>    <p>开发语言：JavaScript、HTML/CSS</p>    <p>操作系统：跨平台</p>    <p>LibreBoard 是一个卡片式的组织 Kanban 的开源实现。可以用来实现团队内部的协作沟通，你可以吧 LibreBoard 看成是 Trello 的开源版本。LibreBoard 为 Sandstorm 平台提供了一键安装以及一个经过验证的 Docker 映像。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/7e8ae7d4801103da86bc15f28e442054.jpg"></p>    <p> </p>    <p>来自：http://www.iteye.com/news/32694</p>    <p> </p>