17 praktische Vue3-UI-Komponentenbibliotheken (Web + Mobilgeräte) zum Teilen

Es ist fast zwei Jahre her, dass Vue3 offiziell veröffentlicht wurde. Im Februar dieses Jahres wurde es offiziell zur Standardversion des Vue-Projekts. Alle wichtigen Komponentenbibliotheken und Frameworks haben Vue 3 unterstützt und optimiert. In diesem Artikel werde ich 17 vorstellen Ich hoffe, dass die Vue3-Bibliothek für praktische UI-Komponenten, einschließlich der Web-UI-Bibliothek und der mobilen UI-Bibliothek, für alle hilfreich ist!

1. Web-UI-Bibliothek

1. ElementUI Plus

Eine Reihe von Desktop-Komponentenbibliotheken basierend auf Vue 3.0 für Entwickler, Designer und Produktmanager. (Lernvideo-Sharing: vuejs-Tutorial)

Offizielle Adresse: https://element-plus.org/zh-CN/

2. Ant Design von Vue

Ant Design von Vue Implementieren, entwickeln und bereitstellen Sie Backend-Produkte auf Unternehmensebene. Offizielle Adresse: https://www.antdv.com/docs/vue/introduce-cn. Ant Design Vue ist ein sehr ausgereiftes Framework, das Ant Design Creating verwendet Die Benutzeroberfläche mit Vue ist einfach zu bedienen und die Komponenten können an eine Vielzahl von Symbolstilen, Schriftarten und dunklen Themen angepasst werden. Ant Design Vue verbessert weiterhin seine mehr als 60 Komponenten, deckt im Wesentlichen die meisten Projektanforderungen ab und macht sie besser und einfacher zugänglich.

Das Ant Design-Paket auf Vue3 ist kleiner, fühlt sich leichter an und unterstützt SSR (einschließlich der Kompositions-API verfügt es über ausgereifte komplexe Komponenten wie Datentabellen, Statistikfelder, Pop-Bestätigungen, Modalitäten und Popup-Fenster).

3. BalmUI

basiert auf Googles Material Design, enthält Vue-Plug-ins und -Anweisungen sowie hochgradig anpassbare Komponenten von einfach bis komplex

Offizielle Adresse: https://next-material.balmjs .com /

BalmUI ist eine Front-End-UI-Komponentenbibliothek, die vom Balm.js-Team (ein Front-End-Workflow-Tool ähnlich der Vue CLI) erstellt wurde. Sie basiert auf dem neuesten Vue 3. Sie ist fertig Sofort einsatzbereit, mit starker Anpassung und Design. Der Stil folgt vollständig den Material Design-Designspezifikationen von Google und ist eine UI-Komponentenbibliothek mit hervorragender interaktiver Erfahrung.

Eigenschaften:

Extrahiert aus den interaktiven Effekten und dem visuellen Stil von Middle- und Back-End-Produkten auf Unternehmensebene, schön und elegant, mit hervorragendem Detailerlebnis

out of the box. Es handelt sich nicht nur um eine hochwertige Vue-Komponente, sondern verfügt auch über eine große Anzahl gepackter Plug-Ins/Anweisungen/gängiger Toolbibliotheken zum Aufrufen

• integrierte Symbolbibliothek. Integrieren Sie die neueste Material Icons-Symbolbibliothek. Alle Komponenten und Plug-Ins sind hochgradig anpassbar und können unabhängig voneinander verwendet werden Kostenlose Open-Source-Front-End-UI-Komponentenbibliothek, vollständige Dokumentation, kein großes Fabrik-KPI-Projekt!
• Offizielle Adresse: https://www.naiveui.com/zh-CN/os-theme

• Naive UI ist eine Front-End-UI-Komponentenbibliothek, die auf der Grundlage des relativ neuen Vue 3.0/TypeScript-Technologie-Stacks entwickelt wurde. Der Autor stammt von TuSimple. Es wurde zunächst zwei Jahre lang intern gepflegt und ist nun Open Source in der Github-Community. Es wird allen Freunden empfohlen, die kostenloses Open Source mögen.

Funktionen:
Die Komponenten sind reichhaltig und vollständig, mehr als 70 häufig verwendete Geschäftskomponenten unterstützen die Einführung bei Bedarf

Der offizielle Theme-Editor wird bereitgestellt, es sind keine umständlichen Less-, Sass- und CSS-Variablen erforderlich. Noch Webpack-Loader verwenden ein fortschrittliches typsicheres Theme-System, das von TypeScript erstellt wurde. Es läuft schnell, ist kompakt und leicht und speziell für Stile optimiert. Alle Komponenten können baumgeschüttelt werden [1], und es besteht keine Notwendigkeit um beliebiges CSS zu importieren, damit die Komponenten ordnungsgemäß funktionieren

5. Arco.design

ByteDance-Produktdesignsystem auf Unternehmensebene, unterstützt die Dualversionen React und Vue

Offizielle Adresse: https://arco. design/

• ArcoDesign basiert auf ByteDance. Das unternehmensinterne Byte Design wurde nach fast drei Jahren des Polierens auf der von den Nuggets veranstalteten „Rare Earth Developer Conference 2021“ durch eine große Menge interner Open-Source-Lösungen aktualisiert Geschäftsniederschlag und -überprüfung Dies ist nicht nur eine UI-Komponentenbibliothek, sondern ein umfassendes Produktdesignsystem auf Unternehmensebene.

ArcoDesign löst hauptsächlich das Problem der nahtlosen Verbindung von Produktdesign und -entwicklung, um Qualität und Effizienz beim Aufbau von Middle- und Back-End-Anwendungen zu verbessern. Derzeit dient ArcoDesign hauptsächlich dem Erlebnisdesign und der technischen Implementierung der Mid- und Back-End-Produkte von ByteDance und wird hauptsächlich von UED-Design- und Entwicklungsstudenten erstellt und gewartet.

• Highlights:

  • Bereitstellung systematischer und umfassender Designspezifikationen und -ressourcen, die Produktdesign, UI-Design und Postentwicklung abdecken

  • React- und Vue-Synchronisierungsunterstützung. Außerdem werden zwei Sätze von UI-Komponentenbibliotheken bereitgestellt: React und Vue. Die Vue-Komponentenbibliothek wurde auf Basis von Vue 3.0 entwickelt

  • Unterstützt das Einschalten des Dunkelmodus mit einem Klick und nahtloses Umschalten

  • Bietet die Best Practice von Arco Pro und organisiert gängige Seitenszenarien, um Benutzern die schnelle Initialisierung von Projekten und die Verwendung von Seitenvorlagen zu erleichtern . Erstellen Sie Mid- und Back-End-Anwendungen von 0 bis 1. Quasar. Erstellen Sie einfach eine leistungsstarke und hochwertige Vue.js 3-Benutzeroberfläche, die einfach zu verwenden ist, aber kein Chinesisch Dokumentation

  Offizielle Adresse: https://quasar.dev/

  Quasar ist ein vollständiges, leistungsorientiertes Framework, das zusätzlich zu Vue beim Erstellen von Vue-Benutzeroberflächen hilft , Node und Webpack, Quasar Außerdem sind Cordova, Capacitor und Electron enthalten, die dabei helfen, Desktop- und Mobilerlebnisse zu erstellen, ohne sie separat erlernen zu müssen.

  7. iDUX

  Vue3.x UI-Komponentenbibliothek, vollständig mit TypeScript entwickelt

  Offizielle Adresse: https://idux.site/

  8. Level-Design-System, das vom Geschäftsteam von Tencent im Rahmen der Geschäftstätigkeit entwickelt wurde
  Offizielle Adresse: https://tdesign.tencent.com/
  Entwicklungsdokumente: https://tdesign.tencent.com/vue-next /overview 9. PrimeVue

  Die hochgradig anpassbare Front-End-UI-Komponentenbibliothek basiert auf der kostenlosen Open-Source-Bibliothek von Vue 3 und ist eine hervorragende Front-End-UI-Komponentenbibliothek aus dem Ausland. Sie ist sehr einzigartig und es lohnt sich, sie zu studieren, zu lernen und damit anzufangen.

  PrimeVue ist eine sehr hervorragende Vue-UI-Komponentenbibliothek, die die Web-UI-Komponentenbibliothek von Vue 3 unterstützt. Sie verfügt über umfangreiche Komponenten, eine starke Anpassung, eine klare offizielle Website-Dokumentation, ausreichend Codebeispiele und die chinesische Sprache ist ebenfalls sehr gut eine äußerst benutzerfreundliche Vue-Komponentenbibliothek.
  

  10. DevUI
  Huaweis UI-Komponenten basieren auf Vue3 und DevUI
  Offizielle Adresse: https://vue-devui.github.io/

  

  11. vuestic-ui
  

  Die kostenlose Open-Source-UI-Bibliothek von Vue 3, die Benutzeroberfläche ist sehr schön und es ist eine Backend-Verwaltungsschnittstelle verfügbar.

  Offizielle Adresse: https://vuestic.dev/

  Vuestic UI ist eine Reihe von Webentwicklungskomponentenbibliotheken, die vom Epicmax-Team entwickelt wurden. Die Vue3-Version wurde kürzlich aktualisiert und veröffentlicht Vue.js. Fachwissen in bester Weise, um ein äußerst benutzerfreundliches und umfassendes Open-Source-Tool zu erstellen. Kurz nach seiner Veröffentlichung wurde Vuestic UI zu einer der beliebtesten mit Vue erstellten Komponentenbibliotheken.

  

  Das Epicmax-Team von Vuestic UI gehört zu den 15 besten Vue.js-Entwicklungsteams der Welt. Durch das responsive Design können diese Komponenten nicht nur in Web-PC-Projekten verwendet werden, sondern sind auch für nahezu jede Bildschirmgröße geeignet. Die Benutzerfreundlichkeit der Tastatur ist eine Vuestic-Funktion, die eine nahtlose Tastaturunterstützung im gesamten Framework bietet.

  Technische Merkmale:

  Kompatibel mit Vue3, integrierte 52 schöne reaktionsfähige Komponenten, reich an Funktionen

  Unterstützt Tastaturnavigation, reibungsloses Erlebnis, was in beliebten Komponentenbibliotheken selten ist

  Globale Unterstützung Konfiguration von Komponenten über Konfigurationsdateien und CSS-Variablen

  Eingebaute 2 Sätze von Farbthemenschemata
  Unterstützt Tree-Shaking-Optimierung zur Reduzierung des Verpackungsvolumens

  Unterstützt die i18n-Internationalisierung

  Kompatibel mit Nicht-IE Browser

  • 12. Headless UI

  • Eine völlig unstilisierte, vollständig zugängliche UI-Komponente, die für die perfekte Integration in Tailwind CSS entwickelt wurde.

  Offizielle Adresse: https://headlessui.com/

  13. View UI Plus

  Eine UI-Komponentenbibliothek und Front-End-Lösung auf Unternehmensebene basierend auf Vue.js 3

  Offizielle Adresse: https://www.iviewui.com/

  

  View UI Plus Es handelt sich um eine Reihe von UI-Komponentenbibliotheken, die auf Vue.js 3 im View Design-Designsystem basieren. Es wird hauptsächlich für Middle- und Back-End-Systeme auf Unternehmensebene verwendet.

  2. Mobile UI-Bibliothek

  14.               Vant

  Vant ist eine leichte und zuverlässige Bibliothek für mobile Komponenten, die 2017 als Open Source verfügbar war.

  Offizielle Adresse: https://vant-contrib.gitee.io/vant/#/zh-CN/

  

  Funktionen

  • Hervorragende Leistung, die durchschnittliche Komponentengröße beträgt weniger als 1 KB (min +gzip )

  • 70+ hochwertige Komponenten, die gängige mobile Szenarien abdecken

  • Keine externen Abhängigkeiten, keine NPM-Pakete von Drittanbietern

  • In TypeScript geschrieben, bietet vollständige Typdefinitionen

  • Einheitentest Abdeckung Die Rate übersteigt 90 %, was eine Stabilitätsgarantie bietet Unterstützt Theme-Anpassung, integrierte über 700 Theme-Variablen

  Unterstützt serverseitiges Rendering
  Unterstützt Internationalisierung, integrierte über 20 Sprachpakete

  • 15. NutUI

  • NutUI ist eine Vue-Mobilkomponentenbibliothek im JD-Stil, die von An entwickelt und bereitgestellt wird Produkt der Enterprise-Klasse mit einer mobilen Weboberfläche.

  Offizielle Adresse: https://nutui.jd.com/#/

  • NutUI 3.0 neue Version bietet

  • 70+ hochwertige Komponenten (20+ mehr als die alte Version)

  • basiert auf der visuellen Spezifikation JD APP 9.0 (die alte Version basiert auf JD APP 7.0)

  • unterstützt auch On-Demand-Zitat

  detailliertere Dokumentation und Beispiele

  unterstützt TypeScript
  unterstützt serverseitiges Rendering (freundlich für SEO-Anforderungen)

  

  Unterstützung benutzerdefinierter Themen

  Abdeckung von Unit-Tests

  • 16. Varlet

  • Bibliothek für mobile Komponenten im Materialstil, die Dokumentation ist sehr vollständig. Von You Yuxi empfohlen und es lohnt sich, darauf zu achten.

  Offizielle Adresse: https://varlet.gitee.io/varlet-ui/#/zh-CN/home

  • Technische Merkmale von Varlet:

  • Bietet 50 hochwertige, leichte Common-Komponenten

  • werden von Chinesen entwickelt und bieten eine vollständige chinesische/englische Dokumentation.

  • Unterstützt On-Demand-Einführung und Theme-Anpassung, unterstützt den Dunkelmodus.

  Unterstützt Internationalisierung.

  Unterstützt Webstorm und vscode-Editor. Hervorhebung von Komponentenattributen
  Support SSR Server-Side-Rendering

  

  Support TypeScript

  ensure mehr als 90% Unit-Testabdeckung

  • 17. 3 wurde vom Front-End-Team erstellt und dient der schnellen Entwicklung von Lotterie-Gameplay für Marketingaktivitäten und Minispielszenarien.

  Offizielle Adresse: https://nutui.jd.com/bingo/#/

  • Technische Eigenschaften der Lotteriekomponenten

  • Enthält insgesamt 12 Lotteriekomponenten

  • UI-Design basierend auf JD.com APP 10.0 Visuelle Spezifikationen

  • Die offizielle Website bietet eine detaillierte Dokumentation und ausreichend Codebeispiele

  • Basiert auf Vue 3.0, unterstützt auch TypeScript und unterstützt die On-Demand-Einführung

  Bequeme und flexible benutzerdefinierte Einstellungen

  Abdeckt 12 Arten gängiger Lotteriekomponenten

  TurnTable Big Wheel Lotterie

  Marquee Marquee Lotterie

  • SquareNine Neun-Quadrat-Raster.Lotterie

  • Scratch Karte Rubbellos-Lotterie

  • GiftBox Geheimnisvolle Geschenkbox „LottoRoll-Lotteriemaschine“

  • ShakeDice

  • GuessGift Du versteckst dich und ich rate

  (Lernvideo-Sharing: Web-Frontend-Entwicklung, Einführung in die Programmierung)

Das obige ist der detaillierte Inhalt von17 praktische Vue3-UI-Komponentenbibliotheken (Web + Mobilgeräte) zum Teilen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!