vue-cli initialisiert eine Methodeninstanz eines vue.js-Projekts

Parsen gepackter .vue-Dateien

Um es uns zu ermöglichen, Komponenten während der Projektentwicklung besser zu verwalten, stellt Vue ein Einzeldatei-Komponentensystem bereit. In der Vue-Datei gibt es drei In dieser Datei werden grundlegende benutzerdefinierte Tags bereitgestellt:
1. Skriptstil
, um verschiedene Inhaltsblöcke von Komponenten zu platzieren, aber aufgrund des Browsers kann dieser Dateityp nicht direkt erkannt werden , also müssen wir es über Webpack kompilieren und packen. Der Beamte stellt einen Loader für die Verarbeitung von .vue bereit: vue-loader

FEHLER in ./src/Hello.vue

Modulerstellung fehlgeschlagen: Fehler: Kann nicht Modul „vue-template-compiler“ finden

Vue wird tatsächlich mit einem .vue-Einzelkomponentensystem entwickelt, kann sich jedoch nicht an tatsächliche komplexe Anforderungen anpassen. Einige Dinge sind in . integriert. vue. Diese Konfiguration ist sehr umständlich, daher stellt der Beamte ein Tool zur Verfügung, das uns beim Erstellen einiger Inhalte hilft, die im Entwicklungsprozess eines Projekts verwendet werden müssen. Mit diesem Tool können wir es sehr bequem erstellen ein auf Vue basierendes Projekt. Wir nennen dieses Tool auch --- scaffolding

Installation

npm install vue-cli -g (global)

oder

yarn global add vue- cli

Nachdem wir das Vue-Gerüst mit der oben genannten Methode installiert haben, können wir einen Befehl in der Befehlszeile verwenden: vue (dieser Befehl hat kein -cli)

Verwendung von vue

vue init

init: Initialisieren (erstellen) Sie ein Vue-basiertes Projekt

vue init webpack hello: Erstellen Sie ein Projekt namens hello basierend auf dem Webpack-Vue-Projekt (die Projekterstellung muss online erfolgen!). Netzwerk! Netzwerk!)

vue-cli ist eine interaktive Befehlszeile. Um das Projekt über den vue-Befehl zu erstellen, müssen wir einige Projektinformationen eingeben:

Projektname: Der Name des Projekts erstellt (dieser Befehl erstellt eine package.json-Datei. Die Namensoption in der Datei ist der Projektname. Der Standardwert ist der Name des aktuell erstellten Projektverzeichnisses. Sie können es auch selbst erstellen (es muss jedoch der Namensgebung entsprechen). Regeln in package.json. Verwenden Sie keine Großbuchstaben, Leerzeichen oder Unterstriche. Sie können - )

Projektbeschreibung verwenden, die auch in der package.json-Datei erscheint, optional

Autor: Autor, optional

Im nächsten Schritt einfach die Eingabetaste drücken

Vue-Router installieren: Gibt an, ob die Vue-Routing-Komponente installiert werden soll it

Verwenden Sie ESLint, um Ihren Code zu linten: Müssen Sie das ESLint-Modul zur Codeerkennung verwenden?

Unit-Tests mit Karma + Mocha einrichten?: Ob Tests (Unit-Tests) installiert werden sollen

E2e-Tests mit Nightwatch einrichten?: Ob End-to-End-Tests installiert werden sollen

Führen Sie die oben genannten Schritte aus!

Nach Abschluss der Konfiguration über vue-cli besteht der nächste Schritt darin, die von vue erforderlichen Abhängigkeitspakete zu installieren. Die Abhängigkeitspakete, die das Projekt installieren muss, werden in der von vue automatisch generierten Datei package.json beschrieben -cli-Tool:

Abhängigkeiten: Abhängigkeitspakete, die tatsächlich im Projekt benötigt werden

devDependencies: einige Toolkits, die während des Projektentwicklungsprozesses benötigt werden und nicht Teil des eigentlichen Online-Codes des Projekts sind

Ausführen

Nachdem die erforderlichen Installationsabhängigkeitspakete installiert wurden, können Sie das Projekt starten und ausführen

yarn run dev / npm run dev: Öffnen Sie eine Testentwicklungsumgebung

Garnlauf-Build: Erstellen Sie das Projekt und verpacken Sie das Projekt. Wir können die gepackten Projektdateien auf den Server hochladen

Wenn es der erste Lauf ist, wird eine Begrüßungsseite angezeigt, und dann können wir das Projekt entwickeln

Projektstruktur

Build-Verzeichnis: einige Skriptdateien und Konfigurationsdateien, die zum Erstellen des Projekts benötigt werden. Befehl
Config-Verzeichnis: a klein wird automatisch in vue-cli installiert Der von Express erstellte Hot-Reload-Webserver, die Konfiguration enthält die relevante Konfiguration dieses Servers
dist-Verzeichnis: Das Speicherverzeichnis nach dem Projekt ist online kompiliert und erstellt
node_modules-Verzeichnis: Projektabhängigkeitspaket-Speicherverzeichnis
src-Verzeichnis: Projektquellcode-Speicherverzeichnis
statisches Verzeichnis: statisches Ressourcenspeicherverzeichnis
Während des Projektentwicklungsprozesses werden die meisten unserer Aufgaben im src-Verzeichnis

erledigt

• main.js: Die im Projekt eingerichtete Eintragsdatei, die automatisch von Vue Scaffolding generiert wird. In dieser Eintragsdatei werden einige Projektinitialisierungsarbeiten durchgeführt

• Vue vorstellen

• Notwendige Komponenten vorstellen

• Vue-Instanz erstellen

Routing

Wenn unsere Anwendung komplex wird, nimmt auch die Anzahl der beteiligten Seiten zu und die Logik wird komplizierter. Es stellt sich heraus, dass wir unsere Website über mehrere Seiten organisieren und verwalten, aber diese Art von Benutzer Die Erfahrung ist nicht sehr gut (da die Seite aktualisiert oder gesprungen wird). Um das Problem der Benutzererfahrung zu lösen, ist es am besten, Daten zu verwenden (die Seite wird sich ändern), es besteht jedoch keine Notwendigkeit, zu springen oder zu aktualisieren.

• Daten asynchron über Ajax ohne Aktualisierung abrufen

• Nachdem Sie die Daten erhalten haben, verarbeiten und verwalten Sie sie über Vue und rendern die Seite

Unter welchen Umständen erhalten Sie die Daten zum Rendern der Seite? Herkömmliche Verarbeitungsmethode: Senden Sie die Anforderung erneut über die URL, um neue Daten und Seiten abzurufen. Wenn Sie den Einzelseiten-Entwicklungsmodus verwenden, können Sie Seitensprünge nicht mehr verwenden Der Hash-Wert in der URL ändert sich, um zu bestimmen, welcher Inhalt abgerufen und welche Seite gerendert werden soll.

Damit der Hash einer URL einer Ansicht entspricht, müssen wir die Beziehung zwischen Hash und Ansicht festlegen. Wir können eine entsprechende Beziehung (Zuordnung) zwischen Hash und Ansicht erstellen
- Legen Sie die Karte fest Hash-Ansicht (Mapping)-Beziehung
- Überwachen Sie Hash-Änderungen
- Wenn sich der Hash-Wert ändert, suchen Sie die entsprechende Komponente gemäß der Karte, um die Ansicht zu rendern

Vue stellt uns einen Drittanbieter zur Verfügung Framework zur Implementierung der oben genannten Funktion: vue-router

Die oben erwähnte Adressansichtszuordnung: Routing

Verwandte Empfehlungen:

Die Einfachheit der Entwicklung mehrerer Beispiel für Seitenanwendungen mit Vue-Cli >

Das obige ist der detaillierte Inhalt vonvue-cli initialisiert eine Methodeninstanz eines vue.js-Projekts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!