Vue-Anfängerhandbuch: Erstellen des ersten Vue-cli-Scaffolding-Programms

1. Vue – Das erste Vue-CLI-Programm

Die Entwicklung von Vue basiert auf NodeJS. Die eigentliche Entwicklung verwendet Vue-cli-Gerüstentwicklung, Vue-Router-Routing und Vuex für die Statusverwaltung. Für Vue UI verwenden wir im Allgemeinen ElementUI (hergestellt von Ele.me) oder ICE (hergestellt von Alibaba), um schnell Front-End-Projekte zu erstellen ~~

ElementUI

EIS

1.1 Was ist vue-cli

Ein offiziell von vue-cli bereitgestelltes Gerüst, das zum schnellen Generieren einer Vue-Projektvorlage verwendet wird.

Die vordefinierte Verzeichnisstruktur und der Basiscode sind wie beim Erstellen eines Maven-Projekts. Wir können uns für die Erstellung eines Skelettprojekts entscheiden. Dieses geschätzte Projekt ist das Gerüst und unsere Entwicklung ist schneller.

Funktion des Projekts

• Einheitliche Verzeichnisstruktur
• Lokales Debuggen
• Hot-Bereitstellung
• Komponententests
• Integrierte Verpackung und Markteinführung

1.2 Erforderliche Umgebung

• Node.js
• Git

Bestätigen Sie, dass nodejs erfolgreich installiert wurde:

• Geben Sie node -v in cmd ein, um zu prüfen, ob die Versionsnummer korrekt gedruckt werden kann!
• Geben Sie npm -v in cmd ein, um zu prüfen, ob die Versionsnummer korrekt gedruckt werden kann!

npm ist ein Softwarepaketverwaltungstool

Installieren Sie vue-cli

npm install1 vue-cli -g
#Testen Sie, ob die Installation erfolgreich ist#Sehen Sie, mit welchen Vorlagen eine Vue-Anwendung erstellt werden kann. Normalerweise wählen wir Webpack
Vue-Liste 

Tipp: Wenn die Vue-Listenabfrage fehlschlägt, fügen Sie das Ziel node_global zur Umgebungsvariable path hinzu.

1.3 Das erste Vue-CLI-Programm

1.3.1 Erstellen Sie ein Vue-Projekt

Wir erstellen einfach einen leeren Ordner auf dem Computer. Ich werde ein neues Verzeichnis unter Laufwerk D erstellen.

1.3.2 Erstellen Sie eine Vue-Anwendung basierend auf der Webpack-Vorlage

#1. Zuerst müssen Sie das entsprechende Verzeichnis cdE:\IDEACode\Vue\vue aufrufen.
#2. Myvue ist hier der Top-Name, Sie können ihn nach Ihren Bedürfnissen benennen vue init webpack myvue

Wählen Sie einfach durchgehend „Nein“ aus.

veranschaulichen:

1.3.3 Initialisieren und ausführen

CD MyVue
npm installieren
npm-Ausführung dev

Nachdem der Befehl erfolgreich ausgeführt wurde, wird die folgende Eingabeaufforderung angezeigt

Öffnen Sie den Port im Browser

Sie können die Portnummer und andere Konfigurationsdateien in index.js ändern

Zusammenfassen

Dies ist das Ende dieses Artikels über den Vue-Anfängerleitfaden zum Erstellen des ersten Vue-CLI-Programms. Weitere Informationen zum ersten Vue-CLI-Programm finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die folgenden verwandten Artikel weiter. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!