10+ Top-Vue.js-Tools und -Bibliotheken (Teilen)

Vue ist weiterhin beliebt und wird von vielen Entwicklern schnell übernommen, und die Tools von Vue.js sind weithin verfügbar. Das ist nicht unvernünftig: Die flache Lernkurve, die klare funktionsgesteuerte Struktur und die hervorragende Dokumentation von Vue erleichtern Neulingen den Einstieg, während erfahrene Entwickler von anderen Frameworks wie React oder Angular wechseln können.

Wenn Sie die Vue-Entwicklung ernst nehmen, werden Sie früher oder später auf einige wichtige Tools und Bibliotheken stoßen, die auffallen. Ihre Nutzung kann Ihre Karriere als Vue-Entwickler voranbringen und Ihnen das Gefühl geben, ein Experte zu sein.

Ich habe eine Liste der bekanntesten Tools und Bibliotheken zusammengestellt, die Sie kennen und schließlich in Ihren Vue.js-Projekten verwenden sollten. Im Gegensatz zu vielen anderen Artikeln, die nur UI-Komponentenbibliotheken auflisten, untersucht diese Zusammenstellung die breite Mischung aus Tools, Bibliotheken und Plugins im Vue-Ökosystem.

Ich habe sie aufgrund ihrer Nützlichkeit, Effektivität und Einzigartigkeit ausgewählt, nicht aufgrund ihrer GitHub-Popularität oder ihrer Sterne.

Vue CLI

Heutzutage scheint es ein Muss für jedes JavaScript-Anwendungsframework zu sein, über eine Art CLI-Tool zu verfügen. Vue ist keine Ausnahme. Vue CLI ist ein voll funktionsfähiges Toolset für die schnelle Vue-Entwicklung. Zusätzlich zum üblichen Projektgerüst können Sie mithilfe der Instant-Prototyping-Funktionen auch neue Ideen ausprobieren, ohne überhaupt ein komplettes Projekt erstellen zu müssen.

Standardmäßig bietet Vue CLI Unterstützung für die wichtigsten Webentwicklungstools und -technologien wie Babel, TypeScript, ESLint, PostCSS, PWA, Jest, Mocha, Cypress und Nightwatch. Dies ist dem erweiterbaren Plugin-System zu verdanken. Das bedeutet, dass die Community wiederverwendbare Plugins für allgemeine Bedürfnisse erstellen und teilen kann.

Aber das Tüpfelchen auf dem i ist die leistungsstarke GUI (Vue UI, im Lieferumfang der CLI enthalten), mit der Sie ganz einfach Projekte erstellen und diese dann konfigurieren und verwalten können, ohne dass Popups erforderlich sind.

Klicken Sie hier, um sich anzuschauen: Vue CLI

VuePress

Der nächste große Player im Vue-Ökosystem ist VuePress, ein von Vue betriebener statischer Site-Generator. Ursprünglich als Werkzeug zum Schreiben technischer Dokumentation entwickelt, ist es heute ein kleines, kompaktes und leistungsstarkes Headless-CMS. Ab Version 1.x bietet es hervorragende Blogging-Funktionen und ein leistungsstarkes Plug-in-System. Es wird mit einem Standardthema geliefert (gemäß der technischen Dokumentation), Sie können jedoch auch ein benutzerdefiniertes Thema erstellen oder vorgefertigte Optionen aus der Community verwenden.

In VuePress können Sie Inhalte in Markdown schreiben und diese dann in eine vorgerenderte statische HTML-Datei konvertieren. Sobald diese Dateien geladen sind, wird Ihre Site als Single-Page-Anwendung ausgeführt, die von Vue, Vue Router und Webpack unterstützt wird.

Einer der Hauptvorteile von VuePress besteht darin, dass Sie Vue-Code oder -Komponenten in Markdown-Dateien einbinden können. Dies gibt Ihnen große Leistungsfähigkeit und Flexibilität, da Sie Ihre Website fast wie eine normale Vue-App entwickeln und alle Vorteile daraus nutzen können.

Klicken Sie hier, um Folgendes anzuzeigen: VuePress

Gridsome

Gridsome hat viele Ähnlichkeiten mit VuePress, verfolgt jedoch einen sehr leistungsstarken Ansatz beim Umgang mit Datenquellen. Es ermöglicht Ihnen, eine Vielzahl von Daten aus Ihrer Anwendung zu verbinden und zu nutzen und diese Daten dann in einer GraphQL-Ebene zu vereinheitlichen. Grundsätzlich nutzt Gridsome Vue für die Frontend-Funktionalität und GraphQL für die Datenverwaltung. Die Funktionsweise lässt sich in diesen drei Schritten zusammenfassen:

• Sie stellen Inhalte in den Datenformaten Markdown, JSON, YAML oder CVS bereit oder importieren Inhalte aus einem CMS wie WordPress oder Drupal.

• Inhalt wird in eine GraphQL-Schicht umgewandelt, die eine zentralisierte Datenverwaltung ermöglicht. Anschließend können Sie diese Daten verwenden, um Ihre Anwendung über Vue zu erstellen.

• Sie können vorgerenderte HTML-Dateien auf einem statischen Webhost oder CDN wie Netlify, Amazon S3, Now.sh, Surge.sh usw. bereitstellen.

Gridsome bietet einige großartige Best Practices wie Code-Splitting, Asset-Optimierung, progressives Bild- und Link-Prefetching. Daher ist Gridsome schnell, PWA-fähig und SEO-freundlich.

Klicken Sie hier, um zu sehen: Gridsome

Vuex

Die Zustandsverwaltung ist eines der Hauptprobleme, mit denen Entwickler beim Erstellen von Webanwendungen konfrontiert sind. Um dieses Problem zu lösen, bietet Vue ein Zustandsverwaltungssystem Vuex. Es fungiert als zentraler Speicher für alle Komponenten in der Anwendung, wobei sich der Status nur auf vorhersehbare Weise ändern kann. Der Store ist ein spezielles Objekt, das in vier Teile unterteilt ist:

• state – ein Objekt, das Anwendungsdaten speichert

• getters – ein Objekt, das Methoden zum Abstrahieren des Zugriffs auf den Zustand enthält

• mutations – das direkte Effekte enthält Objekt der State-Methoden

• Aktionen – Objekt, das Methoden zum Auslösen von Mutationen und zum Ausführen von asynchronem Code enthält

Store kann zur besseren Wartbarkeit auch in mehrere Module unterteilt werden.

Klicken Sie hier, um Folgendes anzuzeigen: Vuex

Nuxt

Bei Verwendung von Server Side Rendering (SSR) wird normalerweise Nuxt verwendet. Dies ist ein einfaches und unkompliziertes Framework zum Erstellen universeller Anwendungen. Außerdem ist es modular aufgebaut, sodass Sie nur die Module verwenden können, die Ihre Anwendung benötigt.

Mit Nuxt können Sie servergerenderte Anwendungen (SSR), Single-Page-Anwendungen (SPA) und progressive Webanwendungen (PWA) erstellen oder es einfach als statischen Site-Generator verwenden.

Kurz gesagt, Nuxt befreit Sie von der mühsamen Arbeit der Strukturierung und Optimierung Ihrer Anwendungen und bietet Ihnen ein optimiertes und angenehmeres Entwicklungserlebnis.

Klicken Sie hier, um Folgendes anzuzeigen: Nuxt

Vuetify

Vuetify ist eine der besten UI-Komponentenbibliotheken auf dem Markt. Es bietet eine große Anzahl gut gestalteter Komponenten (mehr als 80), die auf der Material Design-Spezifikation basieren und den Anforderungen nahezu jeder Anwendung gerecht werden.

Sie können damit SSR-Anwendungen, SPA, PWA und mobile Anwendungen erstellen. Sie können eine neue App starten oder sie zu einer vorhandenen App hinzufügen. Es bietet kostenlose und Premium-Themes, Sie können aber auch Ihre eigenen erstellen. Es bietet außerdem ein System zum Auswählen und Auswählen nur der verwendeten Komponenten, wodurch die endgültige Größe der Anwendung erheblich reduziert wird.

Alle Komponenten von Vuetify sind gut dokumentiert und mit anschaulichen Beispielen versehen.

Klicken Sie hier, um Folgendes anzuzeigen: Vuetify

Quasar

Quasar ist die JavaScript-Version der Java-Philosophie „Einmal schreiben, überall ausführen“. Es handelt sich um ein universelles, Vue-fähiges Framework, das es Ihnen ermöglicht, Anwendungen für verschiedene Plattformen mit derselben Codebasis zu schreiben. Spas, PWAs, SSR-Apps, hybride mobile Apps oder Multiplattform-Desktop-Apps, was auch immer!

Es verfügt über eine großartige Dokumentation und jede Menge Komponenten, die auf Leistung und Reaktionsfähigkeit ausgelegt sind. Quasar integriert standardmäßig Best Practices (HTML/CSS/JS-Minifizierung, Cache-Busting, Tree Shaking, Quellzuordnung, Codeaufteilung für Lazy Loading, ES6-Transporte, Code-Linting, Barrierefreiheit), sodass Sie sich hauptsächlich auf die Funktionalität Ihres Anwendungsprogramms konzentrieren können. Es bietet auch ein CLI-Tool zum einfachen Erstellen neuer Projekte.

Klicken Sie hier, um Folgendes anzuzeigen: Quasar

Storybook

Vue ist in erster Linie ein komponentenbasiertes Framework, daher ist das Schreiben guter, effizienter Komponenten für jeden Anwendungsentwickler von entscheidender Bedeutung. Während dieses Prozesses kann sich Storybook als nützlich erweisen. Es ermöglicht Ihnen, UI-Komponenten in einer benutzerfreundlichen und isolierten Umgebung zu entwickeln, zu verwalten und zu testen. Das Tool ermöglicht es Entwicklern, Komponenten unabhängig von der Hauptanwendung zu erstellen und diese interaktiv in einer isolierten Entwicklungsumgebung darzustellen, ohne sich um anwendungsspezifische Abhängigkeiten und Anforderungen kümmern zu müssen.

Storybook bietet viele Add-ons sowie eine flexible API, um Storybook an Ihre Bedürfnisse anzupassen. Es ist auch möglich, eine statische Webanwendung zu exportieren und das Projekt auf einem beliebigen HTTP-Server bereitzustellen.

Klicken Sie hier, um zu sehen: Storybook

Vue Apollo

In letzter Zeit gab es viele Diskussionen über GraphQL. Wenn Sie also bereits damit vertraut sind und es in Vue integrieren möchten, sollten Sie Vue Apollo ausprobieren. Diese Bibliothek macht die Arbeit mit Vue und GraphQL/Apollo reibungsloser und angenehmer.

Klicken Sie hier, um Folgendes anzuzeigen: Vue Apollo

Eagle.js

Eagle.js ist ein leistungsstarkes, flexibles und einzigartiges Diashow-System, das mit Vue erstellt wurde. Damit können Sie leicht wiederverwendbare Komponenten, Folien und Stile in Ihren Präsentationen erstellen. Es unterstützt auch Animationen, Themen und interaktive Widgets und eignet sich daher perfekt für die Erstellung von Webpräsentationen. Eagle.js verfügt über eine einfache und leicht zu hackende API, sodass Sie echte Freiheit bei der Erstellung der gewünschten Diashows haben.

Eines der größten Dinge, die Sie mit dieser Bibliothek tun können, ist, Ihre Folien in separate Dateien zu packen und sie dann in anderen Diashows wiederzuverwenden. Sie können auch Folien von einer bestimmten Folie in eine andere Folie importieren. Mit einem so leistungsstarken Tool können Sie komplexe, interaktive und unterhaltsame Präsentationen erstellen.

Klicken Sie hier, um sich anzuschauen: Eagle.js

5 der bekannteren Vue-Tools und -Bibliotheken

• Vue DevTools ist eine großartige Browsererweiterung zum Debuggen von Vue- und Vuex-Anwendungen.

• Vue Test Utils ist eine Sammlung nützlicher Dienstprogramme zum Testen von Vue-Komponenten.

• Vue Router ist der offizielle Router von Vue.

• Vue Native ist ein JavaScript-Framework für mobile Anwendungen, ähnlich wie React Native.

• Weex ist ein Framework zum Erstellen mobiler Anwendungen unter Verwendung moderner Webtechnologien, einschließlich Vue.

Ursprüngliche Adresse: https://www.zeolearn.com/interview-questions/vue-js

Verwandte Empfehlungen:

Zusammenfassung der Front-End-Vue-Interviewfragen 2020 (mit Antworten)

vue-Tutorial-Empfehlung: Die neuesten 5 vue.js-Video-Tutorial-Auswahlen im Jahr 2020

Weitere Programmierkenntnisse finden Sie unter: Einführung in die Programmierung! !

Das obige ist der detaillierte Inhalt von10+ Top-Vue.js-Tools und -Bibliotheken (Teilen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!