Nuxt 3 - ein beliebtes hybrides Vue-Framework

Nuxt 3 wurde umgestaltet und neu geschrieben, um ESM und TypeScript nativ zu unterstützen. Sie ist derzeit instabil und daher noch nicht produktionsreif. Der erste Kandidat ([email protected]) soll am 7. April 2022 veröffentlicht werden.

Quelle

Ein neues Projekt starten

Öffnen Sie ein Terminal oder öffnen Sie ein integriertes Terminal von Visual Studio Code und verwenden Sie den folgenden Befehl, um einen neuen Starter zu erstellen Projekt:

npx nuxi init nuxt3-app

Öffnen Sie den Ordner nuxt3-app:

cd nuxt3-app

Installieren Sie die Abhängigkeiten:

yarn installieren

Starten Sie den Entwicklungsserver:

Garnentwicklung

Erstellen Sie die Anwendung:

Garn herstellen

Führen Sie die erstellte Anwendung aus:

Garnanfang

Was gibt es Neues?

Vue 3 Unterstützung

Vue 3 wurde mit mehreren neuen Funktionen ausgestattet, die die Erstellung und Wartung von Anwendungen wesentlich schneller und einfacher machen. Die wichtigsten Änderungen wurden an der Global Vue API und der Events API vorgenommen. Vue 3führt auch neue Funktionen wie provide / inject, Composition API (unten beschrieben), Fragmente und Teleport ein.

Zusammensetzung API

Composition API ist eine integrierte Vue 3-Funktion, die eine Reihe von APIs bereitstellt, die die Verwendung importierter Funktionen anstelle der Deklaration von Optionen ermöglicht. Die Hauptvorteile der Composition API sind also eine bessere Wiederverwendung von Logik, eine flexiblere Codeorganisation und eine hervorragende TypeScript-Integration. Alle Teile der neuen API können auch außerhalb von Vue Komponenten.

Nuxt 3 bietet ein neues Verzeichnis - Verbundwerkstoffe/ - die den automatischen Import von Vue-Verbundmaterial in die Anwendung ermöglicht.

Beispiel komponierbar:

// Es wird als useFoo() verfügbar sein (camelCase des Dateinamens ohne Erweiterung)
 export default function () {
   return useState('foo', () => 'bar')// Es wird als useFoo() verfügbar sein (camelCase des Dateinamens ohne Erweiterung)
 export default function () {
   return useState('foo', () => 'bar')
 }
 }

Beispiel für die Verwendung eines Composable in einer Vue Komponente:

<div>{{ foo }}</div>
</>

Wie Sie oben sehen können, wird ein zusammensetzbares Element als useFoo exportiert, genau wie im Konst-Namen angegeben. Wenn es keinen Exportnamen gibt, wird das Composable als pascelCase des Dateinamens zugänglich sein. Es ermöglicht Ihnen auch, automatisch importierte Composables mit einem beliebten Vue Store Composable namens Pina.

Quelle

Nitro-Motor

Nitro ist ein Full-Stack-Server, der Rollup und Node.js Worker in der Entwicklung, um die Code- und Kontextisolierung zu gewährleisten. Sie umfasst auch eine Server-API und eine Server-Middleware. In der Produktion baut die Engine die Anwendung und den Server in einem Verzeichnis auf - `.output`. Das Besondere daran ist, dass die Ausgabe leichtgewichtig ist: minifiziert und ohne jegliche Knoten Module. Mit Nitro können Sie die Ausgabe auf Node.js, Serverless, Workers, Edge-Side-Rendering oder als rein statische Ausgabe bereitstellen. 

Nuxt 3 bietet die Möglichkeit der Bereitstellung auf Azure oder Netlify, ohne dass eine Konfiguration erforderlich ist, zusammen mit einer Firebase- oder Cloudflare-Bereitstellung mit minimaler Konfiguration.

Vite

Vite ist ein Frontend-Tool der nächsten Generation, das eine integrierte Funktion für Nuxt 3. Dieses Tool ermöglicht eine schnellere Entwicklung von Webprojekten. Für die Entwicklung bietet der Server Vite umfangreiche Funktionserweiterungen gegenüber nativen ES-Modulen und ein sehr schnelles Hot Module Replacement (HMR).

Während des Erstellungsprozesses bündelt Vite den Code mit vorkonfigurierten Rollups, um die statischen Assets für die Produktion zu optimieren.

Neue Dateistruktur

Quelle

Nuxt 3 führt eine leicht veränderte Dateistruktur ein. Die größten Änderungen wurden an `app.vue` vorgenommen - das `pages/` Verzeichnis ist optional und wenn es nicht vorhanden ist, wird die Anwendung keinen Vue-Router enthalten, was nützlich ist, wenn man eine Ladeseite oder eine Anwendung erstellt, die kein Routing benötigt. 

Beispiel app.vue-Datei:

Hallo Welt!

Um Routing, Seiten und Layout einzubinden, müssen Sie integrierte Komponenten verwenden, nämlich `NuxtPage` und `NuxtLayout`. Beispiel:

<div>
<p>&nbsp;&nbsp;&nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;</p>
</div>

app.vue" ist die Hauptkomponente der Nuxt-Anwendungso dass alles, was dort hinzugefügt wird, global ist und auf jeder Seite erscheint. 

Die Veränderung der Nuxt Verzeichnisstruktur wird das Verzeichnis `store/` durch `composables/` ersetzt, da Vue 3führt Composables ein, die die Läden ersetzen.

Migration von Vue 2 auf Vue 3 mit Nuxt Bridge

Nuxt 3 führt die Nuxt Bridge ein - eine Vorwärtskompatibilitätsschicht, die Nuxt 2-Anwendungen mit Nuxt 3-Funktionen aufrüstet, so dass sie sich selbst Stück für Stück aufrüsten kann. Sie bietet Zugang zu Funktionen wie: Nitro-Engine, Composition API und neue CLI, indem man die Bridge einfach installiert und aktiviert.

Nuxt Bridge ist abwärtskompatibel, so dass ältere Plugins und Module weiterhin funktionieren, während die Migration einfach und ohne Neuschreiben der gesamten Anwendung möglich ist.

Um Nuxt Bridge zu aktivieren, müssen Sie sicherstellen, dass der Dev-Server nicht läuft, dann alle Paket-Sperrdateien entfernen und `nuxt-edge` installieren:

- "nuxt": "^2.15.0"

"nuxt-edge": "latest"

Danach installieren Sie alle Abhängigkeiten neu:

Garn installieren

Ihre Migration mit Nuxt Bridge ist abgeschlossen!

Eine andere Möglichkeit ist die Installation Nuxt Bridge als eine Entwicklungsabhängigkeit:

yarn add --dev @nuxt/bridge@npm:@nuxt/bridge-edge

Dann müssen Sie die Skripte in `package.json` aktualisieren, um die Änderungen zu berücksichtigen, die der Nitro-Server in den Erstellungsprozess einbringt.