國內最火的 HTML、CSS、JavaScript 開源項目 Top 榜，你知多少？

標籤：content   檔案引入   img   ima   sgi   弦圖   地區   外掛程式   strong   

對於開發人員而言，想要著手前端開發，HTML、CSS 和 JavaScript 是三項必備的基礎技能。而如何事半功倍地掌握好這些知識？通過瞭解當下火熱的開源項目不乏為最佳學習姿勢。本文盤點國內評分最高且收藏量超過 100 的前端技術開源項目，希望可以協助更多的開發人員擴充學習。

 

1.極簡模組化前端UI架構 Layui

 

評分：9.3；收藏量：873

 

授權協議：MIT

開發語言：JavaScript、HTML/CSS 

作業系統：跨平台

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

 

Layui 是一款採用自身模組規範編寫的情懷型前端UI架構，遵循原生HTML/CSS/JS的書寫與組織形式，門檻極低，拿來即用。其外在極簡，卻又不失飽滿的內在，體積輕盈，組件豐盈，從核心代碼到API的每一處細節都經過精心雕琢，非常適合介面的快速開發。Layui 首個版本發佈於2016年金秋，她區別於那些基於MVVM底層的UI架構，卻並非逆道而行，而是信奉返璞歸真之道。準確地說，她更多是為服務端程式員量身定做，你無需涉足各種前端工具的複雜配置，只需面對瀏覽器本身，讓一切你所需要的元素與互動，從這裡信手拈來。

 

 

2.JavaScript 圖表庫 ECharts

 

評分：8.9；收藏量：2448

 

授權協議：BSD

開發語言：JavaScript 

作業系統：跨平台

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

 

ECharts是一款由百度前端技術部開發的，基於Javascript的資料視覺效果圖表庫，提供直觀，生動，可互動，可個人化定製的資料視覺效果圖表。提供大量常用的資料視覺效果圖表，底層基於ZRender（一個全新的輕量級canvas類庫），建立了座標系，圖例，提示，工具箱等基礎組件，並在此上構建出折線圖（地區圖）、柱狀圖（條狀圖）、散佈圖（泡泡圖）、餅圖（環形圖）、K線圖、地圖、力導向布局圖以及和弦圖，同時支援任意維度堆積和多圖表混合展現。

 

 

3.國產跨屏響應式前端架構 拼圖 Pintuer

 

評分：8.7；收藏量：220

 

授權協議：Apache

開發語言：JavaScript、HTML/CSS

作業系統：跨平台

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

 

拼圖 Pintuer.com：國內優秀的HTML、CSS、JS跨屏響應式開源前端架構，使用最新瀏覽器技術，為快速的前端開發提供一系統的文本、表徵圖、媒體、表格、表單、按鈕、菜單、網格系統等樣式工具包，佔用資源小，使用拼圖可以快速構建簡潔、優雅而且自動適應手機、平板、案頭電腦等裝置的前端介面，讓前端開發像玩遊戲一下快樂而輕鬆。

 

拼圖前端架構在傳統CSS架構的基本上，增加了HTML5、CSS3、JS等技術組合應用，應用於最新的瀏覽器技術，同時相容較早的瀏覽器，新舊結合，承前啟後，開發人員只需把架構檔案引入到項目中，就可以初現快速的共同開發，改變以往建立PC網站同時，再建立手機網站的局面，實現一站響應所有裝置，大大提高了開發效率。

 

 

4.輕量級 Material Design 前端架構 MDUI

 

評分：8.6；收藏量：215

 

授權協議：MIT

開發語言：JavaScript、HTML/CSS

作業系統：跨平台

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

 

MDUI 是一個輕量級的 Material Design 前端架構，對照著 Material Design 文檔進行開發，爭取 1:1 實現 Material Design 中的組件。

 

• 多主題支援：MDUI 擁有 19 種主色、 16 種強調色、和一種夜間主題。只需添加一個 CSS 類即可實現主題的切換。

• 輕量級：包含所有主題的 CSS 檔案僅 26.4KB minified + gzip，JavaScript 檔案僅 12KB minified + gzip，且沒有任何依賴

• 響應式：移動優先，可適配所有螢幕。

 

5.Win10 風格的前端響應式 使用者介面架構 Win10-UI

 

評分：8.5；收藏量：170

 

授權協議：SATA

開發語言：JavaScript、HTML/CSS 

作業系統：跨平台

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

 

Win10-UI是一款win10風格的後台UI架構。它使用了豐富的win10案頭元素，包括案頭表徵圖、視窗化子頁面管理、開始菜單、動態小磁貼等組件，相容主流現代瀏覽器及移動端的螢幕尺寸，適合快速開發後台管理系統的前端介面。

 

Win10-UI採用傳統UI架構的渲染設計，無序記住繁複的js代碼，只需要套用html結構就可以輕鬆渲染出案頭元素。同時也保留了主動調用的API，讓進階開發人員可以定義UI的細節。它並沒有定義太多的“規則”，你完全可以用css、js擴充它的功能，把它打造成屬於你的獨一無二的後台UI。

 

 

6.Node 終端介面庫 blessed-contrib

 

評分：8.5；收藏量：125

 

授權協議：MIT

開發語言：JavaScript

作業系統：跨平台

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

 

blessed-contrib 是使用 Node.js 構建終端應用介面的庫。

 

 

7.基於 React 和 Redux 的現代內容編輯器 ORY Editor

 

評分：8.3；收藏量：109

 

授權協議：AGPL

開發語言：JavaScript 

作業系統：跨平台

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

 

ORY 是一家構建和維護開發人員工具的公司，ORY Editor 是一個用於 Web 的智能、可擴充和現代的編輯器（“WYSIWYG”），使用 React 編寫。如果你厭倦了 contenteditable 的限制，這將是不錯的選擇。

 

ORY Editor 可用於建立網站，與 Squarespace 類似，不過它可以離線運行，通過它建立的網站會儲存在裝置上，還可以建立自己的設計和外掛程式。

 

 

8.行動裝置 App動畫效果架構 Lottie

 

評分：8.3；收藏量：317

 

授權協議：Apache

開發語言：Java、Objective-C、JavaScript

作業系統：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 開發的一款能夠為原生應用添加動畫效果的開源工具。Lottie 目前提供了 iOS、Android 和 React Native 版本，能夠即時渲染 After Effects 動畫特效。

 

目前，Lottie支援路徑修剪、蒙版、遮蓋等操作。此外還有一個可選的緩衝機制，對那些頻繁使用的東西能夠更快載入。這款應用的目標就是協助開發人員和動畫師能夠更輕鬆的為應用建立動畫，從而在整體上提升互動因素。

 

 

9.主題最佳化包 JQuery EasyUI 1.5.x Of Insdep Theme

 

評分：8.3；收藏量：101

 

授權協議：GPL

開發語言：JavaScript

作業系統：跨平台

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

 

Insdep theme是基於EasyUI 1.5.x 的一款免費的美化主題包，擁有百度編輯器、cropper、Highcharts、justgage、plupload等各類適應本主題的第三方外掛程式美化補丁。並且各類常用Jquery外掛程式正在美化中。後期會提供更多的主題、組件及第三方外掛程式美化樣式。

 

 

10.基於 Ueditor 的現代化富文字編輯器 Neditor

 

評分：8.3；收藏量：503

 

授權協議：MIT

開發語言：JavaScript

作業系統：跨平台

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

 

百度前端團隊做了許多努力，現在 Ueditor 是公認最好用的中文富文字編輯器。但是隨著時間的推移，大家感覺百度編輯器並不是那麼漂亮。於是我們對 Ueditor 進行修改，有了現在的 Neditor 。

 

 

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

 

評分：8.3；收藏量：475

 

授權協議：MIT

開發語言：HTML/CSS 

作業系統：跨平台

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

 

iView 是一套基於 Vue.js 的 UI 組件庫，主要服務於 PC 介面的中後台產品。

 

特性

 

• 高品質、功能豐富

• 友好的 API ，自由靈活地使用空間

• 使用單檔案的 Vue 組件化開發模式

• 基於 npm + webpack + babel 開發，支援 ES2015

 

 

12.基於 Vue 2.0 的組件庫 Element

 

評分：8.2；收藏量：609

 

授權協議：MIT

開發語言：JavaScript 

作業系統：跨平台

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

 

Element，一套為開發人員、設計師和產品經理準備的基於 Vue 2.0 的組件庫，提供了配套設計資源，協助你的網站快速成型。由餓了麼公司前端團隊開源。

 

 

13.HTML5 跨屏前端架構 Amaze UI 

 

評分：8.1；收藏量：1213

 

授權協議：MIT

開發語言：JavaScript、HTML/CSS 

作業系統：跨平台

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

 

Amaze UI採用國際最前沿的“組件式開發”以及“移動優先”的設計理念，基於其豐富的組件，開發人員可通過簡單拼裝即可快速構建出HTML5網頁應用，上線僅半年，Amaze UI就成為了國內最流行的前端架構，目前在Github上收穫Star數近萬，服務於全球50W開發人員。

 

 

14.專為設計的 UI 庫 WeUI

 

評分：7.7；收藏量：2002

 

授權協議：MIT

開發語言：JavaScript、HTML/CSS

作業系統：跨平台

 

WeUI 是由官方設計團隊專為移動 Web 應用程式設計的 UI 庫。

 

WeUI 是一套同原生視覺體驗一致的基礎樣式庫，為 Web 開發量身設計，可以令使用者的使用感知更加統一。包含button、cell、dialog、toast、article、icon等各式元素。

 

 

15.儀錶盤 WebApp 模板 AdminLTE

 

評分：7.6；收藏量：136

 

授權協議：MIT

開發語言：JavaScript、HTML/CSS

作業系統：跨平台

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

 

AdminLTE 是受歡迎的開源的管理儀錶盤和控制台的WebApp模板。它是基於Bootstrap 3的CSS架構，反應靈敏的HTML模板。利用所有Bootstrap的組件對大部分使用外掛程式進行設計和調整風格，建立出可以用作後端應用程式的使用者介面一致性設計。AdminLTE是基於模組化設計，很容易在其之上定製和重製。

 

 

16.web上線部署系統工具 Walle

 

評分：7.4；收藏量：359

 

授權協議：MIT

開發語言：PHP、HTML/CSS

作業系統：跨平台

 

Walle 一個web部署系統工具，配置簡單、功能完善、介面流暢、開箱即用！支援git、svn版本管理，支援各種web代碼發布，PHP，Python，JAVA等代碼的發布、復原，可以通過web來一鍵完成。

 

 

17.網站管理後台模板 Charisma

 

評分：7.4；收藏量：1055

 

授權協議：Apache

開發語言：HTML/CSS

作業系統：跨平台

 

Charisma 是基於 Twitter Bootstrap 製作的響應式網站管理後台模板，包含9套漂亮的主題。

 

 

18.開源看板管理系統 LibreBoard

 

評分：7.4；收藏量：380

 

授權協議：MIT

開發語言：JavaScript、HTML/CSS

作業系統：跨平台

 

LibreBoard 是一個卡片式的組織 Kanban 的開源實現。可以用來實現團隊內部的協作溝通，你可以吧 LibreBoard 看成是 Trello 的開源版本。LibreBoard 為 Sandstorm 平台提供了一鍵安裝以及一個經過驗證的 Docker 映像。

 

 

註：以上評分、收藏量等資料均來自開源中國

國內最火的 HTML、CSS、JavaScript 開源項目 Top 榜，你知多少？