Wenn Sie ein Frontend-Entwickler sind, dann sind HTML, CSS und JavaScript drei wesentliche Grundkenntnisse, die Sie beherrschen müssen. Natürlich müssen wir auch sehr geschickt damit umgehen können. Der beste Weg, etwas zu lernen, besteht darin, die aktuellen, angesagten Open-Source-Projekte zu verstehen. Dieser Artikel zieht eine Bestandsaufnahme der Front-End-Technologie-Open-Source-Projekte mit den höchsten Bewertungen und mehr als 100 Sammlungen in China und hofft, mehr Entwicklern dabei zu helfen, ihr Wissen zu erweitern.
1. Minimalistisches modulares Front-End-UI-Framework Layui
Bewertung: 9,3; Anzahl der Sammlungen: 873
Lizenzvereinbarung: MIT
Entwicklungssprache: JavaScript, HTML/CSS
Betriebssystem: plattformübergreifend
Quellcode-Adresse: https://gitee.com/sentsin/layui
Layui wird mit einem eigenen Code geschrieben Modulspezifikationen Das emotionale Front-End-UI-Framework folgt der Schreib- und Organisationsform von nativem HTML/CSS/JS. Der Schwellenwert ist extrem niedrig und kann sofort verwendet werden. Von außen ist es minimalistisch, aber innen ist es leicht und reich an Komponenten. Jedes Detail, vom Kerncode bis zur API, ist sehr gut für die schnelle Schnittstellenentwicklung geeignet. Die erste Version von Layui wurde im goldenen Herbst 2016 veröffentlicht. Sie unterscheidet sich von den UI-Frameworks, die auf der untersten Schicht von MVVM basieren, geht aber nicht gegen den Strom, sondern glaubt an die Rückkehr zur Natur. Genauer gesagt ist es eher auf serverseitige Programmierer zugeschnitten. Sie müssen sich nicht mit der komplexen Konfiguration verschiedener Front-End-Tools befassen, sondern können sich nur mit dem Browser selbst befassen immer griffbereit gefunden werden.
2. JavaScript-Diagrammbibliothek ECharts
Bewertung: 8,9; Anzahl der Sammlungen: 2448
Lizenzvereinbarung: BSD
Entwicklungssprache: JavaScript
Betriebssystem: Plattformübergreifend
Quellcode-Adresse: https://gitee.com/echarts/echarts
ECharts ist ein Front- Von Baidu entwickelte Endtechnologie. Eine auf Javascript basierende Datenvisualisierungsdiagrammbibliothek, die vom Ministerium für Wissenschaft und Technologie entwickelt wurde und intuitive, lebendige, interaktive und anpassbare Datenvisualisierungsdiagramme bereitstellt. Bietet eine große Anzahl häufig verwendeter Datenvisualisierungsdiagramme. Die unterste Ebene basiert auf ZRender (einer neuen, leichten Canvas-Klassenbibliothek) und erstellt Koordinatensysteme, Legenden, Eingabeaufforderungen, Toolboxen und andere grundlegende Komponenten sowie die Erstellung von Liniendiagrammen (Flächendiagrammen). Oben: Histogramm (Balkendiagramm), Kreisdiagramm (Donut-Diagramm), K-Liniendiagramm, Karte, kraftgesteuertes Layoutdiagramm und Akkorddiagramm. Es unterstützt auch das Stapeln in jeder Dimension und gemischt Anzeige mehrerer Diagramme.
3. Inländisches bildschirmübergreifendes Front-End-Framework-Puzzle Pintuer
Bewertung: 8,7; Sammlung: 220
Lizenzvereinbarung: Apache
Entwicklungssprache: JavaScript, HTML/CSS
Betriebssystem: plattformübergreifend
Quellcode-Adresse: https://gitee.com/pintuer/pintuer
Puzzle Pintuer.com: Chinas hervorragendes, bildschirmübergreifendes, responsives Open-Source-Frontend-Framework für HTML, CSS und JS, das die neueste Browsertechnologie verwendet, um ein System aus Text, Symbolen, Medien, Tabellen, Formularen, Schaltflächen usw. bereitzustellen Menüs für die schnelle Front-End-Entwicklung, Grid-System und andere Stil-Toolkits, die wenig Ressourcen beanspruchen. Mit Jigsaw können Sie schnell eine einfache, elegante Front-End-Schnittstelle erstellen, die sich automatisch an Mobiltelefone, Tablets, Desktop-Computer und andere Geräte anpasst Dadurch macht die Frontend-Entwicklung genauso viel Spaß und ist so einfach wie das Spielen von Spielen.
Basierend auf dem traditionellen CSS-Framework fügt das Puzzle-Frontend-Framework HTML5, CSS3, JS und andere technische Kombinationsanwendungen hinzu und wird auf die neueste Browsertechnologie angewendet. Es ist auch mit früheren Browsern kompatibel und kombiniert Alt und Neu sowie die Übernahme der Vergangenheit und der Zukunft. Entwickler müssen lediglich die Framework-Datei in das Projekt einführen, und schon kann mit der schnellen gemeinsamen Entwicklung begonnen werden Gleichzeitig wird eine einheitliche Reaktion auf alle Geräte erreicht, was die Entwicklungseffizienz erheblich verbessert.
4. Lightweight Material Design Front-End-Framework MDUI
Bewertung: 8,6; Sammlung: 215
Lizenzvereinbarung: MIT
Entwicklungssprache: JavaScript, HTML/CSS
Betriebssystem: plattformübergreifend
Quellcode-Adresse: https://github.com/zdhxiong/mdui
MDUI ist ein leichtes Material Design-Frontend-Framework. Es wurde gemäß Material Design-Dokumenten entwickelt und ist bestrebt, die Komponenten 1:1 in Material Design zu implementieren.
Unterstützung mehrerer Themen: MDUI verfügt über 19 Primärfarben, 16 Akzentfarben und ein Nachtthema. Fügen Sie einfach eine CSS-Klasse hinzu, um das Thema zu wechseln.
Leicht: Die CSS-Datei einschließlich aller Themes ist nur 26,4 KB minimiert + gzip, die JavaScript-Datei ist nur 12 KB minimiert + gzip und weist keine Abhängigkeiten auf
Responsiv: zuerst mobil, anpassbar an alle Bildschirme .
5. Frontend-responsives UI-Framework im Win10-Stil
Bewertung: 8,5; Sammlung: 170
Autorisierungsvereinbarung: SATA
Entwickelt Sprache: JavaScript, HTML/CSS
Betriebssystem: Plattformübergreifend
Quellcode-Adresse: https://github.com/yuri2peter/win10-ui
Win10- Die Benutzeroberfläche ist ein Hintergrund-UI-Framework im Win10-Stil. Es nutzt eine Fülle von Win10-Desktop-Elementen, einschließlich Desktop-Symbolen, Fenster-Unterseitenverwaltung, Startmenü, dynamischen Kacheln und anderen Komponenten. Es ist mit gängigen modernen Browsern und mobilen Bildschirmgrößen kompatibel und eignet sich für die schnelle Entwicklung von Front-End-Schnittstellen Backend-Managementsysteme.
Win10-UI übernimmt das Rendering-Design des herkömmlichen UI-Frameworks und merkt sich den komplizierten JS-Code in der falschen Reihenfolge. Sie müssen nur die HTML-Struktur anwenden, um Desktop-Elemente einfach zu rendern. Gleichzeitig bleibt auch die aktiv aufgerufene API erhalten, sodass fortgeschrittene Entwickler die Details der Benutzeroberfläche definieren können. Es definiert nicht zu viele „Regeln“. Sie können seine Funktionen vollständig mit CSS und JS erweitern und es zu einer einzigartigen Backend-Benutzeroberfläche für Sie machen.
6.Node-Terminalschnittstellenbibliothek blessed-contrib
Bewertung: 8,5; Sammlung: 125
Lizenzvereinbarung: MIT
Entwicklungssprache: JavaScript
Betriebssystem: plattformübergreifend
Quellcode-Adresse: https://github.com/yaronn/blessed-contrib
blessed- contrib Es handelt sich um eine Bibliothek, die Node.js zum Erstellen von Terminalanwendungsschnittstellen verwendet.
7. ORY Editor, ein moderner Content-Editor basierend auf React und Redux
Bewertung: 8,3; Anzahl der Sammlungen: 109
Lizenzvereinbarung: AGPL
Entwicklungssprache: JavaScript
Betriebssystem: Plattformübergreifend
Quellcode-Adresse: https://github.com/ory/editor
ORY ist ein Unternehmen, das Entwicklertools entwickelt und pflegt. ORY Editor ist ein intelligenter, skalierbarer und moderner Editor für das Web („WYSIWYG“), geschrieben in React. Dies wäre eine gute Wahl, wenn Sie die Einschränkungen inhaltsbearbeitbarer Inhalte satt haben.
Mit dem ORY Editor können Websites erstellt werden, ähnlich wie mit Squarespace, aber er funktioniert offline, die damit erstellten Websites werden auf dem Gerät gespeichert und Sie können Ihre eigenen Designs und Plugins erstellen.
8. Animationseffekt-Framework für mobile Anwendungen Lottie
Bewertung: 8,3; Sammlung: 317
Lizenzvereinbarung: Apache
Entwicklungssprache: Java, Objective-C, JavaScript
Betriebssystem: Android
Quellcode-Adresse:
Android: https://github.com/airbnb/ lottie-android
iOS: https://github.com/airbnb/lottie-ios
React Native: https://github.com/airbnb/lottie-react-native
Lottie ist ein von Airbnb entwickeltes Open-Source-Tool, das Animationseffekte zu nativen Anwendungen hinzufügen kann. Lottie bietet derzeit iOS-, Android- und React Native-Versionen an, mit denen animierte Spezialeffekte von After Effects in Echtzeit gerendert werden können.
Derzeit unterstützt Lottie das Trimmen, Maskieren, Abdecken und andere Vorgänge von Pfaden. Es gibt auch einen optionalen Caching-Mechanismus zum schnelleren Laden häufig verwendeter Elemente. Ziel dieser App ist es, Entwicklern und Animatoren dabei zu helfen, Animationen für ihre Apps einfacher zu erstellen und so den Gesamtinteraktivitätsfaktor zu verbessern.
9. Theme-Optimierungspaket JQuery EasyUI 1.5.x von Insdep Theme
Bewertung: 8,3; Anzahl der Sammlungen: 101
Lizenz Vereinbarung: GPL
Entwicklungssprache: JavaScript
Betriebssystem: Plattformübergreifend
Quellcode-Adresse: https://gitee.com/weavors/JQuery-EasyUI-1.5 .x- Of-Insdep-Theme
Das Insdep-Theme ist ein kostenloses Verschönerungsthemenpaket, das auf EasyUI 1.5.x basiert. Es verfügt über angepasste Baidu-Editor, Cropper, Highcharts, Justgage, Plupload und andere Drittanbieter-Plug-Ins zu diesem Thema. Und verschiedene häufig verwendete JQuery-Plug-Ins werden verschönert. Weitere Themes, Komponenten und Plug-Ins von Drittanbietern werden bereitgestellt, um den Stil in Zukunft zu verschönern.
10, ein moderner Rich-Text-Editor basierend auf Ueditor
Bewertung: 8,3; Sammlungen: 503
Lizenzvereinbarung: MIT
Entwicklungssprache: JavaScript
Betriebssystem: plattformübergreifend
Quellcode-Adresse: https://gitee.com/notadd/neditor
Baidu Front-End-Team Nach vielen Bemühungen gilt Ueditor nun als der nützlichste chinesische Rich-Text-Editor. Aber mit der Zeit hat jeder das Gefühl, dass Baidu Editor nicht so schön ist. Also haben wir Ueditor modifiziert und den aktuellen Neditor erhalten.
11. UI-Komponentenbibliothek basierend auf Vue.js
Bewertung: 8,3; Sammlungen: 475
Lizenzvereinbarung: MIT
Entwicklungssprache: HTML/CSS
Betriebssystem: plattformübergreifend
Quellcode-Adresse: https://gitee.com/icarusion/iview
iView Es handelt sich um eine Reihe von UI-Komponentenbibliotheken basierend auf Vue.js, die hauptsächlich die Middle- und Backend-Produkte der PC-Schnittstelle bedienen.
Funktionen
Hohe Qualität, funktionsreich
Freundliche API, kostenlose und flexible Raumnutzung
Nutzung Single Das Vue-Komponentenentwicklungsmodell der Datei
basiert auf npm + webpack + babel und unterstützt ES2015
12. Basierend auf der Vue 2.0-Komponentenbibliothek Element
Bewertung : 8,2; Anzahl der Sammlungen: 609
Lizenzvereinbarung: MIT
Entwicklungssprache: JavaScript
Betriebssystem: Plattformübergreifend
Quellcode-Adresse: https://github.com/ ElemeFE/element
Element ist eine Vue 2.0-basierte Komponentenbibliothek für Entwickler, Designer und Produktmanager. Sie bietet unterstützende Designressourcen, damit Ihre Website schnell Gestalt annimmt. Es ist Open Source vom Front-End-Team von Ele.me.
13.HTML5 Cross-Screen-Frontend-Framework Amaze UI
Bewertung: 8,1; Sammlungen: 1213
Lizenzvereinbarung: MIT
Entwicklungssprache: JavaScript, HTML/CSS
Betriebssystem: plattformübergreifend
Quellcode-Adresse: https://gitee.com/amazeui/amazeui
Amaze UI übernimmt die modernsten internationalen „Komponenten-basierten Entwicklungs“- und „Mobile-First“-Designkonzepte. Basierend auf seinen umfangreichen Komponenten können Entwickler durch einfache Montage schnell HTML5-Webanwendungen erstellen Innerhalb eines halben Jahres hat sich Amaze UI zum beliebtesten Frontend-Framework in China entwickelt. Es hat derzeit fast 10.000 Sterne auf Github und bedient 500.000 Entwickler auf der ganzen Welt.
14, eine UI-Bibliothek speziell für WeChat
Bewertung: 7,7; Sammlung: 2002
Lizenzvereinbarung: MIT
Entwicklungssprache: JavaScript, HTML/CSS
Betriebssystem: Plattformübergreifend
WeUI ist eine UI-Bibliothek, die vom offiziellen WeChat-Designteam speziell für mobile WeChat-Webanwendungen entwickelt wurde.
WeUI ist eine grundlegende Stilbibliothek, die mit der nativen visuellen Erfahrung von WeChat übereinstimmt. Sie ist maßgeschneidert für die WeChat-Webentwicklung und kann die Benutzerwahrnehmung einheitlicher gestalten. Enthält verschiedene Elemente wie Schaltfläche, Zelle, Dialog, Toast, Artikel, Symbol usw.
15. Dashboard WebApp Template AdminLTE
Bewertung: 7,6; Anzahl der Sammlungen: 136
Lizenzvereinbarung: MIT
Entwicklungssprache: JavaScript, HTML/CSS
Betriebssystem: plattformübergreifend
Quellcode-Adresse: https://github.com/almasaeed2010/AdminLTE/
AdminLTE Ja Beliebte Open-Source-Webanwendungsvorlage für Admin-Dashboards und Control Panels. Es handelt sich um ein CSS-Framework, das auf Bootstrap 3 basiert, einer responsiven HTML-Vorlage. Nutzen Sie alle Bootstrap-Komponenten, um die meisten verwendeten Plugins zu entwerfen und zu gestalten und so ein konsistentes Benutzeroberflächendesign zu erstellen, das als Backend-Anwendung verwendet werden kann. AdminLTE basiert auf einem modularen Aufbau und kann darauf aufbauend einfach angepasst und neu erstellt werden.
16. Web-Online-Bereitstellungssystem-Tool Walle
Bewertung: 7,4; Anzahl der Sammlungen: 359
Lizenzvereinbarung: MIT
Entwicklungssprache: PHP, HTML/CSS
Betriebssystem: plattformübergreifend
Walle ist ein Web-Deployment-System-Tool mit einfacher Konfiguration, vollständigen Funktionen, reibungsloser Benutzeroberfläche und sofort einsatzbereit -Out of the box verwenden! Unterstützt die Git- und SVN-Versionsverwaltung sowie verschiedene Webcode-Releases. Die Veröffentlichung und das Rollback von PHP-, Python-, JAVA- und anderen Codes können mit einem Klick über das Web abgeschlossen werden.
17. Website-Management-Hintergrundvorlage Charisma
Bewertung: 7,4; Anzahl der Sammlungen: 1055
Lizenzvereinbarung: Apache
Entwicklungssprache: HTML/CSS
Betriebssystem: plattformübergreifend
Charisma ist eine responsive Website-Management-Hintergrundvorlage basierend auf Twitter Bootstrap, einschließlich 9 Sätzen wunderschöner Themen.
18. Open-Source-Kanban-Managementsystem LibreBoard
Bewertung: 7,4; Sammlung: 380
Lizenzvereinbarung: MIT
Entwicklungssprache: JavaScript, HTML/CSS
Betriebssystem: plattformübergreifend
LibreBoard ist eine Open-Source-Implementierung von Kanban, einer kartenbasierten Organisation. Es kann zur kollaborativen Kommunikation innerhalb eines Teams verwendet werden. Sie können sich LibreBoard als eine Open-Source-Version von Trello vorstellen. LibreBoard bietet eine Ein-Klick-Installation und ein verifiziertes Docker-Image für die Sandstorm-Plattform.
Der obige Inhalt ist eine kurze Einführung in 18 beliebte inländische Open-Source-Projekte zum Thema Front-End-Entwicklung. Ich hoffe, dass er allen helfen kann.
Verwandte Empfehlungen:
Einführung einer Microsoft-Open-Source-Projekt-Website – CodePlex
Eine Sammlung hervorragender PHP-Open-Source-Projekte
Zusammenfassung der PHP-Open-Source-Projekte
Das obige ist der detaillierte Inhalt von18 Top-inländische HTML-, CSS- und JavaScript-Open-Source-Projekte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
