對(duì)于開發(fā)者而言，想要著手前端開發(fā)，HTML、CSS 和 JavaScript 是三項(xiàng)必備的基礎(chǔ)技能。而如何事半功倍地掌握好這些知識(shí)？通過了解當(dāng)下火熱的開源項(xiàng)目不乏為***學(xué)習(xí)姿勢(shì)。本文盤點(diǎn)國內(nèi)評(píng)分***且收藏量超過 100 的前端技術(shù)開源項(xiàng)目，希望可以幫助更多的開發(fā)者擴(kuò)展學(xué)習(xí)。
1.極簡模塊化前端UI框架 Layui

評(píng)分：9.3；收藏量：873

授權(quán)協(xié)議：MIT

開發(fā)語言：JavaScript、HTML/CSS

操作系統(tǒng)：跨平臺(tái)

源碼地址： https://gitee.com/sentsin/layui

Layui 是一款采用自身模塊規(guī)范編寫的情懷型前端UI框架，遵循原生HTML/CSS/JS的書寫與組織形式，門檻極低，拿來即用。其外在極簡，卻又不失飽滿的內(nèi)在，體積輕盈，組件豐盈，從核心代碼到API的每一處細(xì)節(jié)都經(jīng)過精心雕琢，非常適合界面的快速開發(fā)。Layui ***版本發(fā)布于2016年金秋，她區(qū)別于那些基于MVVM底層的UI框架，卻并非逆道而行，而是信奉返璞歸真之道。準(zhǔn)確地說，她更多是為服務(wù)端程序員量身定做，你無需涉足各種前端工具的復(fù)雜配置，只需面對(duì)瀏覽器本身，讓一切你所需要的元素與交互，從這里信手拈來。

2.JavaScript 圖表庫 ECharts

評(píng)分：8.9；收藏量：2448

授權(quán)協(xié)議：BSD

開發(fā)語言：JavaScript

操作系統(tǒng)：跨平臺(tái)

源碼地址： https://gitee.com/echarts/echarts

ECharts是一款由百度前端技術(shù)部開發(fā)的，基于Javascript的數(shù)據(jù)可視化圖表庫，提供直觀，生動(dòng)，可交互，可個(gè)性化定制的數(shù)據(jù)可視化圖表。提供大量常用的數(shù)據(jù)可視化圖表，底層基于ZRender（一個(gè)全新的輕量級(jí)canvas類庫），創(chuàng)建了坐標(biāo)系，圖例，提示，工具箱等基礎(chǔ)組件，并在此上構(gòu)建出折線圖（區(qū)域圖）、柱狀圖（條狀圖）、散點(diǎn)圖（氣泡圖）、餅圖（環(huán)形圖）、K線圖、地圖、力導(dǎo)向布局圖以及和弦圖，同時(shí)支持任意維度的堆積和多圖表混合展現(xiàn)。

3.國產(chǎn)跨屏響應(yīng)式前端框架 拼圖 Pintuer

評(píng)分：8.7；收藏量：220

授權(quán)協(xié)議：Apache

開發(fā)語言：JavaScript、HTML/CSS

操作系統(tǒng)：跨平臺(tái)

源碼地址： https://gitee.com/pintuer/pintuer

拼圖 Pintuer.com：國內(nèi)優(yōu)秀的HTML、CSS、JS跨屏響應(yīng)式開源前端框架，使用***瀏覽器技術(shù)，為快速的前端開發(fā)提供一系統(tǒng)的文本、圖標(biāo)、媒體、表格、表單、按鈕、菜單、網(wǎng)格系統(tǒng)等樣式工具包，占用資源小，使用拼圖可以快速構(gòu)建簡潔、優(yōu)雅而且自動(dòng)適應(yīng)手機(jī)、平板、桌面電腦等設(shè)備的前端界面，讓前端開發(fā)像玩游戲一下快樂而輕松。

拼圖前端框架在傳統(tǒng)CSS框架的基本上，增加了HTML5、CSS3、JS等技術(shù)組合應(yīng)用，應(yīng)用于***的瀏覽器技術(shù)，同時(shí)兼容較早的瀏覽器，新舊結(jié)合，承前啟后，開發(fā)者只需把框架文件引入到項(xiàng)目中，就可以初現(xiàn)快速的共同開發(fā)，改變以往建立PC網(wǎng)站同時(shí)，再建立手機(jī)網(wǎng)站的局面，實(shí)現(xiàn)一站響應(yīng)所有設(shè)備，大大提高了開發(fā)效率。

4.輕量級(jí) Material Design 前端框架 MDUI

評(píng)分：8.6；收藏量：215

授權(quán)協(xié)議：MIT

開發(fā)語言：JavaScript、HTML/CSS

操作系統(tǒng)：跨平臺(tái)

源碼地址： https://github.com/zdhxiong/mdui

MDUI 是一個(gè)輕量級(jí)的 Material Design 前端框架，對(duì)照著 Material Design 文檔進(jìn)行開發(fā)，爭取 1:1 實(shí)現(xiàn) Material Design 中的組件。

• 多主題支持：MDUI 擁有 19 種主色、 16 種強(qiáng)調(diào)色、和一種夜間主題。只需添加一個(gè) CSS 類即可實(shí)現(xiàn)主題的切換。
• 輕量級(jí)：包含所有主題的 CSS 文件僅 26.4KB minified + gzip，JavaScript 文件僅 12KB minified + gzip，且沒有任何依賴
• 響應(yīng)式：移動(dòng)優(yōu)先，可適配所有屏幕。

5.Win10 風(fēng)格的前端響應(yīng)式 UI 框架 Win10-UI

評(píng)分：8.5；收藏量：170

授權(quán)協(xié)議：SATA

開發(fā)語言：JavaScript、HTML/CSS

操作系統(tǒng)：跨平臺(tái)

源碼地址： https://github.com/yuri2peter/win10-ui

Win10-UI是一款win10風(fēng)格的后臺(tái)UI框架。它使用了豐富的win10桌面元素，包括桌面圖標(biāo)、窗口化子頁面管理、開始菜單、動(dòng)態(tài)小磁貼等組件，兼容主流現(xiàn)代瀏覽器及移動(dòng)端的屏幕尺寸，適合快速開發(fā)后臺(tái)管理系統(tǒng)的前端界面。

Win10-UI采用傳統(tǒng)UI框架的渲染設(shè)計(jì)，無序記住繁復(fù)的js代碼，只需要套用html結(jié)構(gòu)就可以輕松渲染出桌面元素。同時(shí)也保留了主動(dòng)調(diào)用的API，讓高級(jí)開發(fā)者可以定義UI的細(xì)節(jié)。它并沒有定義太多的“規(guī)則”，你完全可以用css、js擴(kuò)充它的功能，把它打造成屬于你的***的后臺(tái)UI。

6.Node 終端界面庫 blessed-contrib

評(píng)分：8.5；收藏量：125

授權(quán)協(xié)議：MIT

開發(fā)語言：JavaScript

操作系統(tǒng)：跨平臺(tái)

源碼地址： https://github.com/yaronn/blessed-contrib

blessed-contrib 是使用 Node.js 構(gòu)建終端應(yīng)用界面的庫。

7.基于 React 和 Redux 的現(xiàn)代內(nèi)容編輯器 ORY Editor

評(píng)分：8.3；收藏量：109

授權(quán)協(xié)議：AGPL

開發(fā)語言：JavaScript

操作系統(tǒng)：跨平臺(tái)

源碼地址： https://github.com/ory/editor

ORY 是一家構(gòu)建和維護(hù)開發(fā)者工具的公司，ORY Editor 是一個(gè)用于 Web 的智能、可擴(kuò)展和現(xiàn)代的編輯器（“WYSIWYG”），使用 React 編寫。如果你厭倦了 contenteditable 的限制，這將是不錯(cuò)的選擇。

ORY Editor 可用于創(chuàng)建網(wǎng)站，與 Squarespace 類似，不過它可以離線運(yùn)行，通過它創(chuàng)建的網(wǎng)站會(huì)存儲(chǔ)在設(shè)備上，還可以創(chuàng)建自己的設(shè)計(jì)和插件。

8.移動(dòng)應(yīng)用動(dòng)畫效果框架 Lottie

評(píng)分：8.3；收藏量：317

授權(quán)協(xié)議：Apache

開發(fā)語言：Java、Objective-C、JavaScript

操作系統(tǒng)：Android

源碼地址：

• Android : https://github.com/airbnb/lottie-android
• iOS : https://github.com/airbnb/lottie-ios
• React Native : https://github.com/airbnb/lottie-react-native

Lottie 是 Airbnb 開發(fā)的一款能夠?yàn)樵鷳?yīng)用添加動(dòng)畫效果的開源工具。Lottie 目前提供了 iOS、Android 和 React Native 版本，能夠?qū)崟r(shí)渲染 After Effects 動(dòng)畫特效。

目前，Lottie支持路徑修剪、蒙版、遮蓋等操作。此外還有一個(gè)可選的緩存機(jī)制，對(duì)那些頻繁使用的東西能夠更快加載。這款應(yīng)用的目標(biāo)就是幫助開發(fā)者和動(dòng)畫師能夠更輕松的為應(yīng)用創(chuàng)建動(dòng)畫，從而在整體上提升互動(dòng)因素。

9.主題優(yōu)化包 JQuery EasyUI 1.5.x Of Insdep Theme

評(píng)分：8.3；收藏量：101

授權(quán)協(xié)議：GPL

開發(fā)語言：JavaScript

操作系統(tǒng)：跨平臺(tái)

源碼地址： https://gitee.com/weavors/JQuery-EasyUI-1.5.x-Of-Insdep-Theme

Insdep theme是基于EasyUI 1.5.x 的一款免費(fèi)的美化主題包，擁有百度編輯器、cropper、Highcharts、justgage、plupload等各類適應(yīng)本主題的第三方插件美化補(bǔ)丁。并且各類常用Jquery插件正在美化中。后期會(huì)提供更多的主題、組件及第三方插件美化樣式。

10.基于 Ueditor 的現(xiàn)代化富文本編輯器 Neditor

評(píng)分：8.3；收藏量：503

授權(quán)協(xié)議：MIT

開發(fā)語言：JavaScript

操作系統(tǒng)：跨平臺(tái)

源碼地址： https://gitee.com/notadd/neditor

百度前端團(tuán)隊(duì)做了許多努力，現(xiàn)在 Ueditor 是公認(rèn)***用的中文富文本編輯器。但是隨著時(shí)間的推移，大家感覺百度編輯器并不是那么漂亮。于是我們對(duì) Ueditor 進(jìn)行修改，有了現(xiàn)在的 Neditor 。

11.基于 Vue.js 的 UI 組件庫 iView

評(píng)分：8.3；收藏量：475

授權(quán)協(xié)議：MIT

開發(fā)語言：HTML/CSS

操作系統(tǒng)：跨平臺(tái)

源碼地址： https://gitee.com/icarusion/iview

iView 是一套基于 Vue.js 的 UI 組件庫，主要服務(wù)于 PC 界面的中后臺(tái)產(chǎn)品。

特性

• 高質(zhì)量、功能豐富
• 友好的 API ，自由靈活地使用空間
• 使用單文件的 Vue 組件化開發(fā)模式
• 基于 npm + webpack + babel 開發(fā)，支持 ES2015

12.基于 Vue 2.0 的組件庫 Element

評(píng)分：8.2；收藏量：609

授權(quán)協(xié)議：MIT

開發(fā)語言：JavaScript

操作系統(tǒng)：跨平臺(tái)

源碼地址： https://github.com/ElemeFE/element

Element，一套為開發(fā)者、設(shè)計(jì)師和產(chǎn)品經(jīng)理準(zhǔn)備的基于 Vue 2.0 的組件庫，提供了配套設(shè)計(jì)資源，幫助你的網(wǎng)站快速成型。由餓了么公司前端團(tuán)隊(duì)開源。

13.HTML5 跨屏前端框架 Amaze UI

評(píng)分：8.1；收藏量：1213

授權(quán)協(xié)議：MIT

開發(fā)語言：JavaScript、HTML/CSS

操作系統(tǒng)：跨平臺(tái)

源碼地址： https://gitee.com/amazeui/amazeui

Amaze UI采用國際最前沿的“組件式開發(fā)”以及“移動(dòng)優(yōu)先”的設(shè)計(jì)理念，基于其豐富的組件，開發(fā)者可通過簡單拼裝即可快速構(gòu)建出HTML5網(wǎng)頁應(yīng)用，上線僅半年，Amaze UI就成為了國內(nèi)***的前端框架，目前在Github上收獲Star數(shù)近萬，服務(wù)于全球50W開發(fā)者。

14.專為微信設(shè)計(jì)的 UI 庫 WeUI

評(píng)分：7.7；收藏量：2002

授權(quán)協(xié)議：MIT

開發(fā)語言：JavaScript、HTML/CSS

操作系統(tǒng)：跨平臺(tái)

WeUI 是由微信官方設(shè)計(jì)團(tuán)隊(duì)專為微信移動(dòng) Web 應(yīng)用設(shè)計(jì)的 UI 庫。

WeUI 是一套同微信原生視覺體驗(yàn)一致的基礎(chǔ)樣式庫，為微信 Web 開發(fā)量身設(shè)計(jì)，可以令用戶的使用感知更加統(tǒng)一。包含button、cell、dialog、toast、article、icon等各式元素。

15.儀表盤 WebApp 模板 AdminLTE

評(píng)分：7.6；收藏量：136

授權(quán)協(xié)議：MIT

開發(fā)語言：JavaScript、HTML/CSS

操作系統(tǒng)：跨平臺(tái)

源碼地址： https://github.com/almasaeed2010/AdminLTE/

AdminLTE 是受歡迎的開源的管理儀表盤和控制面板的WebApp模板。它是基于Bootstrap 3的CSS框架，反應(yīng)靈敏的HTML模板。利用所有Bootstrap的組件對(duì)大部分使用插件進(jìn)行設(shè)計(jì)和調(diào)整風(fēng)格，創(chuàng)建出可以用作后端應(yīng)用程序的用戶界面一致性設(shè)計(jì)。AdminLTE是基于模塊化設(shè)計(jì)，很容易在其之上定制和重制。

16.web上線部署系統(tǒng)工具 Walle

評(píng)分：7.4；收藏量：359

授權(quán)協(xié)議：MIT

開發(fā)語言：PHP、HTML/CSS

操作系統(tǒng)：跨平臺(tái)

Walle 一個(gè)web部署系統(tǒng)工具，配置簡單、功能完善、界面流暢、開箱即用！支持git、svn版本管理，支持各種web代碼發(fā)布，PHP，Python，JAVA等代碼的發(fā)布、回滾，可以通過web來一鍵完成。

17.網(wǎng)站管理后臺(tái)模板 Charisma

評(píng)分：7.4；收藏量：1055

授權(quán)協(xié)議：Apache

開發(fā)語言：HTML/CSS

操作系統(tǒng)：跨平臺(tái)

Charisma 是基于 Twitter Bootstrap 制作的響應(yīng)式網(wǎng)站管理后臺(tái)模板，包含9套漂亮的主題。

18.開源看板管理系統(tǒng) LibreBoard

評(píng)分：7.4；收藏量：380

授權(quán)協(xié)議：MIT

開發(fā)語言：JavaScript、HTML/CSS

操作系統(tǒng)：跨平臺(tái)

LibreBoard 是一個(gè)卡片式的組織 Kanban 的開源實(shí)現(xiàn)?？梢杂脕韺?shí)現(xiàn)團(tuán)隊(duì)內(nèi)部的協(xié)作溝通，你可以吧 LibreBoard 看成是 Trello 的開源版本。LibreBoard 為 Sandstorm 平臺(tái)提供了一鍵安裝以及一個(gè)經(jīng)過驗(yàn)證的 Docker 映像。

注：以上評(píng)分、收藏量等數(shù)據(jù)均來自開源中國。