Führen Sie die Schritte aus, um schnell ein Vue3.0-Projekt zu erstellen

Wie erstelle ich ein Vue3.0-Basisprojekt?

1. Wir müssen sicherstellen, dass die Vue/CLI-Version über 4.5.0 liegt, um 3.0 besser zu unterstützen

//Installieren Sie das neueste vue/cli
globales Garn-Add @vue/cli 
//oder npm install -g @vue/cli

Verwenden Sie vue -V um die installierte Versionsnummer zu überprüfen und sicherzustellen, dass die Installation erfolgreich war.

2. Erstellen Sie unser erstes Projekt über vue/cli3

vue erstelle mein-projekt

 ? Bitte wählen Sie eine Voreinstellung: (Verwenden Sie die Pfeiltasten)
 Standard (Babel, Eslint) // Standardoption Funktionen manuell auswählen // Funktionen manuell auswählen

Offensichtlich sind die beiden oben genannten Optionen die Standardoptionen. Im ersten Schritt wählen wir die Option zur manuellen Anpassung.

? Bitte wählen Sie eine Voreinstellung: Funktionen manuell auswählen
? Überprüfen Sie die für Ihr Projekt benötigten Funktionen: (Drücken Sie <Leertaste> zum Auswählen, <a> zum Umschalten auf alle, <i> zum Umkehren der Auswahl)
>( ) Babel // Codekompilierung( ) TypeScript // ts
( ) Progressive Web App (PWA) Support // Unterstützt progressive Webanwendungen ( ) Router // Vue-Routing ( ) Vuex // Statusverwaltungsmodus ( ) CSS-Präprozessoren // CSS-Vorverarbeitung ( ) Linter/Formatter // Codestil, Formatüberprüfung ( ) Unit-Tests // Unit-Tests ( ) E2E-Tests // End-to-End-Tests

In diesem Schritt wählen wir einige Konfigurationen aus, die wir entsprechend den Anforderungen unseres Projekts brauchen , wählen alles aus, drücken eine Leertaste für eine Einzelauswahl, drücken einfach die Leertaste im gewünschten Konfigurationselement und bestätigen nach der Auswahl mit der Eingabetaste.

Router

Wählen Sie entsprechend den Projektanforderungen, ob die Route den Verlaufsmodus verwendet.

CSS-Vorkompilierung

In diesem Schritt wähle ich den Node-Sass-Vorverarbeitungstyp und den CSS-Vorkompilierungstyp entsprechend Ihren Projektanforderungen.

ESLint-Syntaxprüfung

? Wählen Sie eine Linter-/Formatierungskonfiguration: (Verwenden Sie die Pfeiltasten)
> ESLint nur mit Fehlerverhinderung // Nur Fehler meldenESLint + Airbnb-Konfiguration // Nicht strenger ModusESLint + Standardkonfiguration // Normaler ModusESLint + Prettier // Strenger ModusTSLint (veraltet) // Tool zur Überprüfung des TypeScript-Formats

Dieser Schritt kann auch je nach Projektanforderungen ausgewählt werden

? Wählen Sie zusätzliche Lint-Funktionen aus: (Drücken Sie <Leertaste> zum Auswählen, <a> zum Umschalten auf alle, <i> zum Umkehren der Auswahl)
>(*) Lint on save // ​​Erkennung beim Speichern ( ) Lint and fix on commit // Erkennung beim Fixieren und Absenden

Wählen Sie den Überprüfungsmodus. Ich habe die Überprüfung beim Speichern gewählt. Ich empfehle Ihnen auch, die Überprüfung beim Speichern zu wählen. Sie können auch einige Grammatikaufforderungen rechtzeitig ändern, was für die Grammatikanpassung praktischer ist.

Wo platzieren Sie die Konfiguration für Babel, ESLint usw. lieber? (Verwenden Sie die Pfeiltasten.)
> In dedizierten Konfigurationsdateien // Gespeichert in dedizierten Konfigurationsdateien In package.json // Gespeichert in package.json

Wählen Sie den Speicherort für benutzerdefinierte Konfigurationen wie Babel, ESLint usw. Hier empfehlen wir Ihnen, die erste

Ob das aktuell ausgewählte Konfigurationselement gespeichert werden soll. Wenn die aktuelle Konfiguration häufig verwendet wird, wird empfohlen, „y“ auszuwählen, um das aktuelle Konfigurationselement zu speichern.

Ausführen des Projekts

An diesem Punkt ist unser Projekt fertig. Lassen Sie uns das Projekt gemäß den Eingabeaufforderungen ausführen.

CD Mai-Projekt
Garn servieren

Upgrade von Vue

Das Projekt läuft bereits, wir müssen jedoch darauf hinweisen, dass es zu Problemen kommt, wenn wir für die direkte Entwicklung die Syntax 3.0 verwenden.

<Vorlage>
  <div Klasse="Startseite">
    {{msg}}
  </div>
</Vorlage>

<Skript>
importiere { toRefs, reaktiv } von 'vue'
Standard exportieren {
  Name: "Home",
  einrichten: () => {
    const state = reaktiv({
      Nachricht: „Hallo Welt“
    })
    zurückkehren {
      …toRefs(Status)
    }
  }
}
</Skript>

Wenn wir die Nachrichtenseite direkt rendern, erhalten wir immer eine Fehlermeldung, dass die Nachrichtenvariable nicht initialisiert ist.

Wir haben es hier nicht eilig. Werfen wir einen Blick auf package.json und überprüfen die Version von vue, um zu sehen, warum sie die 3.0-Syntax nicht unterstützt. Das Problem liegt wirklich hier.

Natürlich ist es immer noch Version 2.xx, also aktualisieren wir die Version

vue hinzufügen vue-next

Nach dem Upgrade haben wir uns package.json angesehen und festgestellt, dass es sich bereits um die Version 3.0.0-beta.1 handelte.

Nach dem Upgrade führen wir unser Projekt in yarn serve aus

Natürlich schlägt mir die Realität immer ins Gesicht und es läuft immer noch nicht. Schauen wir uns min.js entsprechend dem Fehler an.

importieren {
  App erstellen
} von 'vue'
App aus „./App.vue“ importieren
importiere './registerServiceWorker'
Router aus „./router“ importieren
Store aus „./store“ importieren

createApp(App).verwenden(Router).verwenden(Store).mount('#App')

Wir haben einige kleinere Anpassungen vorgenommen und wie erwartet lief unser Projekt normal! Die von uns definierte Nachrichtenzeichenfolge wird auch auf der Seite gerendert.

Bisher haben wir unser erstes Vue3-Projekt durchgeführt

3. Verbesserungen und neue Funktionen von vue3.0 im Vergleich zu vue2.0

1. Im Vergleich zu vue2.0 wurde die Leistung erheblich verbessert (laut Autor beträgt die Leistungsverbesserung 30–300 %).

2. Im Vergleich zu vue2.0 ist die Paketgröße erheblich reduziert. Durch Tree-Shaking-Unterstützung werden nutzlose Module abgeschnitten und nur das Nötigste gepackt, wodurch die Paketgröße erheblich reduziert wird.

3. Verfügbare benutzerdefinierte Rendering-API und erhöhte Skalierbarkeit;

4. Die darunterliegende Schicht wird vollständig in Typescript neu geschrieben, was ts gut unterstützen kann;

5. Neue Funktionen: Composition-API hinzugefügt, die es uns ermöglicht, Komponentenlogik auf weniger invasive und flexiblere Weise zu kombinieren;

Zusammenfassen

Dies ist das Ende dieses Artikels über die schnelle Erstellung von vue3.0-Projekten. Weitere relevante Inhalte zur schnellen Erstellung von vue3.0-Projekten finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!