Vue kann die folgenden Frameworks verwenden: 1. Ant Design Vue ist ein sehr ausgereiftes Framework und es ist sehr einfach, damit eine Benutzeroberfläche zu erstellen. 2. BalmUI ist eine UI-Komponentenbibliothek mit hervorragender interaktiver Erfahrung. Es ist ein reaktionsfähiges, zugängliches und berührungsfreundliches UI-Komponenten-Framework. 4. Vuestic, das mehr als 50 Komponenten mit einzigartigen Funktionen und umfassender Konfigurierbarkeit bietet. 6. Quasar. Es ist eine Leistung -fokussierter Rahmen.
Die Betriebsumgebung dieses Tutorials: Windows7-System, Vue3-Version, DELL G3-Computer.
Vue ist eine leichte, leistungsstarke, komponentenfähige MVVM-Bibliothek mit einer einfachen und übersichtlichen API, die einen schnellen Einstieg ermöglicht. Seit seiner Einführung wurde Vue von vielen Webentwicklern anerkannt.
Bei der Web-Front-End-Projektentwicklung des Unternehmens werden mehrere Projekte mithilfe des Vue-basierten UI-Komponenten-Frameworks entwickelt und offiziell verwendet.
Nach der Verwendung des Vue.js-Frameworks und der UI-Komponentenbibliothek hat das Entwicklungsteam seine Entwicklungseffizienz erheblich verbessert, weniger Code geschrieben und viele Schnittstelleneffektkomponenten wurden gekapselt.
Bei der Auswahl der Vue UI-Komponentenbibliothek haben wir auch einige hervorragende Vue UI-Komponentenbibliotheken gesammelt und zusammengestellt, basierend auf Faktoren wie der Anzahl der Sterne, der Dokumentenvielfalt, der Häufigkeit von Aktualisierungen und der Wartung auf GitHub.
Frameworks, die mit vue verwendet werden können
1. iView ist eine Reihe von Open-Source-UI-Komponentenbibliotheken basierend auf Vue.js, die hauptsächlich Middle- und Back-End-Produkte von PC-Schnittstellen bedienen . Die Komponenten von iView sind relativ vollständig, lassen sich schnell aktualisieren und die Dokumentation ist sehr detailliert. Es wird vom Unternehmensteam gepflegt und ist ein relativ zuverlässiges Vue-UI-Komponenten-Framework. Das iView-Ökosystem läuft ebenfalls sehr gut und es gibt auch einen Open-Source-iView-Administrator, der für Backend-Arbeiten sehr praktisch ist. Laut der offiziellen Website wurde iView in Produkten großer Unternehmen wie TalkingData, Alibaba, Baidu, Tencent, Toutiao, JD.com, Didi Chuxing, Meituan, Sina, Lenovo und anderen großen Unternehmen verwendet.
Offizielle Website von iView: https://www.iviewui.com/2. Vux
Vux ist eine mobile UI-Komponentenbibliothek, die auf Basis von WeUI und Vue2.x entwickelt wurde und hauptsächlich WeChat-Seiten bedient. Die Positionierung von Vux ist sehr klar: Die mobile UI-Komponentenbibliothek von Vue und die grundlegende Stilbibliothek von WeUI. Vux-Komponenten decken alle WeUI-Inhalte ab und erweitern auch einige häufig verwendete Komponenten. Zum Beispiel: Sticky, Timeline, V-Chart, XCircle. Vux wird persönlich betreut. Aber der Stern auf GitHub steht immer noch sehr hoch und erreicht 13.000. Ich habe gesehen, dass das Problem auf GitHub sehr schnell behoben wurde. Die grundlegende Komponentenverwendung und die Auswirkungen des Vux-Dokuments werden vor Ort erläutert. Viele Vux-Anwendungsfälle werden auch auf der offiziellen Vux-Website angezeigt. Bei der Entwicklung von WeChat-Seiten gibt es grundsätzlich nicht zu viele Fehler und die Entwicklung verläuft relativ reibungslos.
Vux offizielle Website: https://vux.li/3. Element
Element, eine Reihe von Desktop-Komponentenbibliotheken basierend auf Vue 2.0 für Entwickler, Designer und Produktmanager. Element ist eine Vue-UI-Komponentenbibliothek, die vom Open-Source-Frontend von Ele.me verwaltet wird. Die Aktualisierungshäufigkeit ist immer noch sehr hoch und eine neue Version wird grundsätzlich jede Woche bis einen halben Monat veröffentlicht. Die Komponenten sind vollständig und decken grundsätzlich alle vom Backend benötigten Komponenten ab. Die Dokumentation erklärt ausführlich und es gibt viele Beispiele. Ich habe es noch nie in der Praxis verwendet. Es gibt viele Element-Tutorials und Artikel im Internet. Das Element sollte eine relativ hochwertige Vue-UI-Komponentenbibliothek sein.
Offizielle Website von Element: http://element.eleme.io/#/zh-CNElement+ ist in Vue2 berühmt geworden. Element+ bringt eine große Anzahl unauffälliger Komponenten in Vue3 ein und erstellt eine sehr komplexe Anwendung Die für das Programm benötigte Software ist bereits erstellt und steht zur Nutzung zur Verfügung. Element+ bietet ausgereifte Datums- und Zeitauswahl-, Baum-, Zeitleisten- und Kalenderkomponenten.Element+ bietet selbst die kleinsten Widgets, die ein Entwickler beim Erstellen von UI-Schnittstellen benötigen könnte, von einfachen Animationen bis hin zu einem Framework-weiten Internationalisierungssystem, das mit i18n gekoppelt werden kann, um benutzerdefinierte Übersetzungen zu erstellen oder sogar nicht integrierte Sprachen hinzuzufügen .
4. Mint
Mint UI basiert auf der mobilen Komponentenbibliothek von Vue.js, die ebenfalls aus dem Ele.me-Frontend-Projekt stammt. Bei Mint UI geht es wirklich darum, Komponenten bei Bedarf zu laden. Sie können nur deklarierte Komponenten und deren Stildateien laden. Mint UI verwendet CSS3, um verschiedene Animationen zu verarbeiten, um unnötiges Neuzeichnen und Umfließen des Browsers zu vermeiden und den Benutzern ein reibungsloses und reibungsloses Erlebnis zu ermöglichen. Viele Video-Tutorials im Internet basieren auf der Mint-Benutzeroberfläche. Es ist sehr praktisch, mobile Webprojekte zu entwickeln, und die Dokumentation ist auch sehr prägnant und klar. Viele Seiten-Mint-UI-Komponenten wurden gekapselt, und Sie können sie grundsätzlich gemäß den Beispielen schreiben und mit einfachen Anpassungen implementieren. Die letzte Codeübermittlung auf GitHub erfolgte jedoch am 16. Januar 2018. Ich weiß nicht, ob das Projekt relativ stabil ist und nicht aktualisiert wurde oder ob das Projekt möglicherweise aufgegeben wird.
Offizielle Mint UI-Website: http://mint-ui.github.io/#!/zh-cn5, Bootstrap-Vue
Bootstrap-VUE bietet die Implementierung von Bootstrap V4-Komponenten und Grid-Systemen auf Basis von vue2 und vervollständigt ein umfangreiches und automatisiertes WAI ARA-Barrierefreiheits-Markup. Bootstrap 4 ist die neueste Version. Im Vergleich zu Bootstrap 3 verfügt es über spezifischere Klassen und wandelt einige verwandte Teile in verwandte Komponenten um. Gleichzeitig wurde die Größe von Bootstrap.min.css um mehr als 40 % reduziert. Bootstrap4 hat die Unterstützung für IE8 und iOS 6 aufgegeben und unterstützt jetzt nur noch IE9 und höher sowie iOS 7 und höher. Als responsive Websites zum ersten Mal populär wurden, war Bootstrap das weltweit beliebteste Framework für die Erstellung mobiler Websites. Man kann sagen, dass Bootstrap auf der ganzen Welt beliebt war. Schon jetzt reagieren viele Unternehmenswebsites mithilfe von Bootstrap. Mit Bootstrap-Vue können Sie Bootstrap-Effekte in Vue erzielen.
Offizielle Website von Bootstrap-Vue: https://bootstrap-vue.js.org/
6. Ant Design Vue
Ant Design Vue ist die Vue-Implementierung von Ant Design 3.X, die in Unternehmen entwickelt und bereitgestellt wird -Backend-Produkt. Mehrere Ant Design Vue-Komponenten finden Sie auf GitHub. Aber im Vergleich ist Ant Design Vue besser. Ant Design Vue teilt das Ant Design of React-Designtoolsystem, implementiert alle Ant Design of React-Komponenten und unterstützt moderne Browser sowie IE9 und höher (erfordert Polyfills). Es ermöglicht denjenigen, die mit Ant Design vertraut sind, einen einfachen Einstieg in die Verwendung von Vue.
Offizielle Website von Ant Design Vue: https://vuecomponent.github.io/ant-design-vue/docs/vue/introduce-cn/
Ant Design Vue ist ein sehr ausgereiftes Framework, das Ant Design Vue zum Erstellen von Benutzern verwendet Schnittstellen Sehr einfach, diese Komponenten können an verschiedene Symbolstile, Schriftarten und schwarze Themen angepasst werden. Ant Design Vue verbessert seine mehr als 60 Komponenten weiterhin, deckt im Wesentlichen die meisten Projektanforderungen ab und macht sie besser und einfacher zugänglich.
7, AT-UI
AT-UI ist eine Front-End-UI-Komponentenbibliothek basierend auf Vue.js 2.0. Sie wird hauptsächlich zur schnellen Entwicklung von Middle- und Back-End-Produkten für PC-Websites verwendet unterstützt moderne Browser und IE9 und höher. AT-UI ist schlanker und implementiert häufig verwendete Komponenten im Hintergrund.
Offizielle Website von AT_UI: https://at-ui.github.io/at-ui/#/zh
8, Vant
Vant ist eine leichte und zuverlässige mobile Vue-Komponentenbibliothek. Vant ist eine Open-Source-Lösung des Youzan-Teams und wird hauptsächlich vom Youzan-Team gepflegt. Vant Weapp ist eine Miniprogrammversion von Vant, einer mobilen Komponentenbibliothek von Youzan. Beide basieren auf denselben visuellen Spezifikationen und bieten konsistente API-Schnittstellen, um Entwicklern die schnelle Erstellung von Miniprogrammanwendungen zu erleichtern. Bisher verfügt Vant über mehr als 50 Open-Source-Komponenten, die von Youzans Online-Geschäft getestet wurden. Zum Beispiel: AddressEdit-Adressbearbeitung, AddressList-Adressliste, Auswahl der Region, Provinz und Stadt, Kartenkarte, Kontaktperson, Coupon-Gutschein, GoodsAction-Produktseiten-Aktionspunkt, SubmitBar-Einreichungsauftragsspalte, SKU-Produktspezifikations-Popup-Ebene. Wenn Sie ein Einkaufszentrum bauen und sich nicht viel um die Schnittstelle und die Implementierung der Geschäftslogik kümmern, können Sie mithilfe der Vant-Komponentenbibliothek schnell entwickeln.
Vant offizielle Website: https://youzan.github.io/vant/#/zh-CN/intro
9, Cube-UI
Cube-ui ist eine exquisite mobile Komponentenbibliothek basierend auf Vue.js . Es wurde aus der internen Komponentenbibliothek von Didi optimiert und verfeinert und hat mehr als ein Jahr lang den Geschäftstest durchlaufen. Jede Komponente verfügt über ausreichende Unit-Tests, um eine Garantie für die spätere Integration zu bieten. Streben Sie nach dem ultimativen interaktiven Erlebnis. Befolgen Sie einheitliche Design-Interaktionsstandards, um Designeffekte in hohem Maße wiederherzustellen. Schnittstellen sind standardisiert und Verwendungsmethoden sind vereinheitlicht und standardisiert, was die Entwicklung einfacher und effizienter macht. Es unterstützt die bedarfsgesteuerte Einführung und Nachkompilierung, ist leichtgewichtig und flexibel und kann problemlos eine Sekundärentwicklung auf der Grundlage vorhandener Komponenten implementieren.
Offizielle Website voncube-ui: https://didi.github.io/cube-ui/#/zh-CN
10, Muse-UI
Muse-UI basiert auf der eleganten Material Design-Benutzeroberfläche von Vue 2.0 Komponentenbibliothek. Muse UI verfügt über mehr als 40 UI-Komponenten zur Anpassung an verschiedene Geschäftsumgebungen. Für die Muse-Benutzeroberfläche ist nur eine kleine Menge Code erforderlich, um den Austausch des Designstils abzuschließen. Mit Muse UI können komplexe Einzelseitenanwendungen entwickelt werden. Offizielle Website von Muse-UI: https://muse-ui.org/#/zh-CN. 11, N3-Komponenten. Die N3-Komponentenbibliothek basiert auf Vue.js und ermöglicht Front-End-Ingenieuren und Full-Stack-Ingenieuren die schnelle Erstellung von Seiten und Anwendungen. N3-Komponenten verfügen über mehr als 60 Komponenten, eine Komponentenliste und benutzerdefinierte Stile, unterstützen mehrere Modellierungsparadigmen (UMD) und werden mit ES6 entwickelt.
Offizielle Website von N3: https://n3-components.github.io/N3-components/component.html
12, Mand Mobile
Mand Mobile ist eine mobile UI-Komponentenbibliothek von Vue für Finanzszenarien, reichhaltig und Erstellen Sie flexibel, praktisch und schnell hochwertige Finanzprodukte und vereinfachen Sie so komplexe Finanzszenarien. Mand Mobile enthält umfangreiche Komponenten und über 30 Basiskomponenten, die finanzielle Szenarien abdecken. Die äußerst benutzerfreundlichen Komponenten verfügen alle über eine detaillierte Dokumentation und Falldemonstrationen. Es basiert auf modernster Technologie, implementiert die Komponentisierung und berücksichtigt die Stabilität und Qualität und strebt eine vollständige Abdeckung finanzieller Szenarien an.
Offizielle Website von Mand Mobile: https://didi.github.io/mand-mobile/#/zh-CN/home
13, we-vue
we-vue ist eine mobile Komponentenbibliothek, die auf Vue.js basiert. In Kombination mit der weui.css-Stilbibliothek kapselt sie eine Reihe von Komponenten und eignet sich sehr gut für die mobile Entwicklung wie öffentliche WeChat-Konten. we-vue enthält mehr als 35 Komponenten, eine Unit-Test-Abdeckung von über 98 %, unterstützt den Babel-Plugin-Import, eine vollständige Online-Dokumentation und detaillierte Online-Beispiele.
Offizielle Website von we-vue: https://wevue.org/
14 veui
veui ist eine Vue-UI-Komponentenbibliothek auf Unternehmensebene, die vom Baidu EFE-Team entwickelt wurde. Derzeit gibt es keine Dokumentation, nur eine Demo.
Es soll auf GitHub noch in Arbeit sein. Dann lasst uns geduldig warten.
Veui offizielle Website: https://ecomfe.github.io/veui/components/#/
15, Semantic-UI-Vue
Semantic-UI-Vue basiert auf Vue.js für das Semantic- UI-Framework erreichen.
Semantic ist ein Entwicklungsframework, das Entwicklern dabei hilft, elegante responsive Layouts mithilfe einer benutzerfreundlichen HTML-Sprache zu erstellen. Semantic-UI-Vue bietet eine API ähnlich der Semantic-UI und eine Reihe anpassbarer Themen.
Offizielle Website von Semantic-UI-Vue: https://semantic-ui-vue.github.io/#/
Bei der Auswahl eines Frameworks müssen Sie es basierend auf der tatsächlichen Webentwicklungssituation und der Vertrautheit des Teams auswählen . Eine gute UI-Komponentenbibliothek ist für ein Webprojekt sehr wichtig
16.Vue.js Material Component Framework – Vuetify.js
https://vuetifyjs.com/zh-Hans
Vuetify basiert vollständig auf Material Design Entwicklung standardisieren. Jede Komponente ist handgefertigt und bietet die besten UI-Tools für Ihre nächste großartige App. Die Entwicklung hört nicht bei den Kernkomponenten der Google-Spezifikation auf. Durch die Unterstützung von Community-Mitgliedern und Sponsoren werden weitere Komponenten entworfen und für jedermann zugänglich gemacht.
Dies ist hauptsächlich eine Vue-UI-Komponente, die im Ausland beliebt ist. Sie verfügt über verschiedene Funktionen und ist ins Chinesische übersetzt, aber einige sind auf Englisch und die Übersetzung ist nicht sehr gut.
PS: Die meisten inländischen UI-Komponenten haben nur einen Teil davon . Viele häufig verwendete Kopfnavigation, untere Navigation, Listenansicht und Rastertabellen sind nicht verfügbar.
17. BalmUI
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 und ist bereit Der Designstil ist sofort einsatzbereit und anpassbar und folgt vollständig den Designspezifikationen von Google für Material Design. Es handelt sich um eine UI-Komponentenbibliothek mit hervorragender interaktiver Erfahrung.
BalmUI hat seine Version 9.0 veröffentlicht, die Vue3 unterstützt. Balm basiert auf dem Material Design von Google und kommt daher bekannt vor. Balm wird mit Vue-Plugins und -Anweisungen sowie hochgradig anpassbaren Komponenten geliefert, die von einfach bis komplex reichen.
Offizielle Website von BalmUI: https://next-material.balmjs.com/#/
BalmUI entwickelt sich sehr schnell. Wenn Sie den Materialdesign-Stil verwenden möchten, verwenden Sie komplexe integrierte Anweisungen (z. B. Entprellen und UI-Ripple). ) zum Erstellen benutzerdefinierter Komponenten. Wenn es praktisch ist, eignet es sich sehr gut für Vue3-Projekte.
18, Wave UI
Wave UI ist ein reaktionsfähiges, anpassbares, zugängliches und berührungsfreundliches UI-Komponenten-Framework, das mehr als 40 UI-Komponenten enthält und mit Vue 3 und Vue 2 kompatibel ist.
WaveUI ist nach der Veröffentlichung von Vue3 gut aufgestellt. Die Entwicklung von WaveUI begann, als sich Vue3 noch im Alpha-Stadium befand. Ziel ist es, seine API zu unterstützen, sobald es stabil ist, was es zu einem der ersten Vue3-UI-Frameworks macht. .
Offizielle Website: https://antoniandre.github.io/wave-ui/
WaveUI bietet über 40 schöne und reaktionsfähige Komponenten, die von Spinnern bis hin zu Kalendern und allem dazwischen reichen. WaveUI bietet außerdem Nützlichkeit, Anpassbarkeit und ausgefeilte integrierte Formularvalidierungsfunktionen.
Die von WaveUI bereitgestellten Komponenten sind sehr schön, die Animationseffekte sind ebenfalls sehr gut und der Stil ist im gesamten Framework konsistent. Eine großartige Wahl für reaktionsfähige Vue3-Anwendungen der Enterprise-Klasse.
19, Vuestic
Vuestic ist eines der schönsten Open-Source-Management-Panels für Vue. Es ist gut darin, wartbaren Vue-Code zu schreiben und flexible Komponenten und Schnittstellen zu erstellen.
Offizielle Website: https://vuestic.dev/
Das Team hat kürzlich die Vue3-Version von Vuestic veröffentlicht, die die beliebte Vuestic Admin-Benutzeroberfläche und weitere Komponenten enthält. Vuestic hebt seine sofort einsatzbereite Unterstützung für die Tastaturnavigation hervor, eine Funktion, die aufgrund der Benutzererfahrung, die sie bietet, in der Front-End-Community beliebt ist.
Vuestic bietet über 50 Komponenten mit einzigartigen Funktionen und umfassender Konfigurierbarkeit, die reaktionsschnell gestaltet sind, um mit praktisch allen Bildschirmauflösungen zu funktionieren. Vuestic bietet nahtlose Übersetzungsunterstützung und Tastaturzugänglichkeit im gesamten Framework.
Vuestic hat sich mit seinem wunderschönen Komponentenkatalog als eines der schönsten Vue3-UI-Frameworks etabliert. Sie entwickeln jetzt komplexere Komponenten wie Datumsauswahlen oder Datentabellen, die mit Sicherheit genauso kreativ sind wie ihre aktuellen Produkte.
20, Ionic
Offizielle Website: https://ionicframework.com/docs/vue/overview
Ionic ist eines der ersten UI-Frameworks, das Vue3-Unterstützung bietet. Ionic ist eher auf mobile UI ausgerichtet und das Team weiß, wie man ein hervorragendes UI-Framework betreut und pflegt.
Ionic Vue ist ein sehr ausgereiftes Framework mit einer tollen Community, unzähligen StackOverflow-Fragen, Unternehmensunterstützung und einem großen Slack-Kanal mit Kernmitgliedern, der es einfach macht, Unterstützung zu erhalten, wenn Sie Hilfe benötigen.
Das Ionic Vue-Framework hat mehr als 45.000 Sterne auf Github und wird von vielen großen Unternehmen verwendet, darunter Airbus und Electronic Arts. Das Team von Ionic ist dafür bekannt, dass es sein UI-Framework gut pflegt. Dies ist jetzt und in Zukunft eine gute Wahl .
21, Naive UI
Offizielle Website: https://www.naiveui.com/zh-CN/os-theme
Naive UI wurde auf Twitter veröffentlicht und dann vom Ersteller von Vue weitergeleitet neues Leben Die Komponentenbibliothek bringt viel Verkehr. Nun hat Naive UI in weniger als drei Monaten 5,1.000 Sterne auf GitHub erreicht.
Es bietet mehr als 70 gut gemachte Komponenten, die nahtlos in fast jede Art von Vue3-Anwendung integriert werden können. Die Komponenten von Naive bieten eine hervorragende Leistung, sind hochgradig anpassbar und unterstützen TypeScript, was ein großartiges Entwicklungserlebnis bietet.
Die Dokumentationsseite ist einfach zu navigieren und bietet vollständige Anpassungseingaben, um Entwicklern eine Vorschau zu ermöglichen, wie Komponenten in ihren eigenen Themes aussehen werden. Mit diesen Optionen können Sie Ihr eigenes komplettes Theme mit Farbmustern und Schriftarten erstellen. Dieses benutzerdefinierte Design kann heruntergeladen und einfach zur Anwendung hinzugefügt werden, um die Standardeinstellungen zu überschreiben.
22, Quasar
Offizielle Website: https://next.quasar.dev/
Quasar ist ein vollständiges, leistungsorientiertes Framework, das beim Erstellen von Vue-Benutzeroberflächen (SPA, PWA, SSR, Mobilgeräte und Desktops) hilft. Zusätzlich zu Vue, Node und Webpack umfasst Quasar auch Cordova, Capacitor und Electron, die dabei helfen können, Desktop- und Mobilerlebnisse zu erstellen, ohne sie separat erlernen zu müssen.
Das Quasar-Framework scheint auf Material Design zu basieren, aber sobald Sie einmal angefangen haben, ist alles sehr anpassbar, um es an Ihr eigenes Designsystem anzupassen.
Die Unterstützung für Vue3 ist ebenfalls sehr schnell und Quasar hat fast alle v1-Komponenten, Plugins und Anweisungen veröffentlicht. Darüber hinaus haben sie zusammensetzbare Komponenten veröffentlicht, um Entwicklern zu helfen, tiefere Einblicke in die Quasar-API zu gewinnen.
23, PrimeVUE
Offizielle Website: https://primefaces.org/primevue/showcase/#/setup
PrimeVUE ist auch eines der ersten Frameworks, das Vue3 unterstützt, und es hat uns nicht enttäuscht. Mit über 80 Komponenten erweist sich PrimeVUE als eines der Frameworks mit dem breitesten Komponentenspektrum auf dieser Liste.
Zu den Komponenten gehören Passwortformulare mit Messgeräten, Schiebereglern, Bäumen, Diagrammen, geteilten Schaltflächen, Knöpfen, Diagrammen und mehr. PrimeVUE lässt sich sogar in Vuelidate integrieren, eine Formularvalidierungsbibliothek. Enthält vorgefertigte Themes und bietet einen ausgereiften visuellen Editor, der Entwicklern hilft, ihre eigenen Themes anzupassen.
【Empfohlene verwandte Video-Tutorials: vuejs-Einführungs-Tutorial, Erste Schritte mit dem Web-Frontend】
Das obige ist der detaillierte Inhalt vonWelche Frameworks können für Vue verwendet werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!