Vue-Projektkonstruktion und praktisches Beispiel-Tutorial

Aufgrund des relativ sanften Lernprozesses und der neuartigen technischen Ideen wird Vue von der Mehrheit der Front-End- und Back-End-Entwickler bevorzugt. Gleichzeitig haben auch die leicht verständlichen API- und Datenbindungsfunktionen gewonnen seine Beliebtheit. Dieser Artikel erläutert hauptsächlich den Aufbau und die tatsächliche Implementierung des Vue-Projekts, sodass er nicht zu sehr auf dessen API und Syntax eingeht. Er soll Einsteigern von Vue helfen, die Schritte und Methoden zum Erstellen eines Vue-Projekts von Grund auf zu verstehen.

Vor dem Erstellen eines Vue-Projekts müssen wir zunächst die Klassifizierung von Vue-Projekten verstehen. Hier unterteile ich sie hauptsächlich in zwei Kategorien: (1) Führen Sie die Datei vue.js direkt ein (2) Verwenden Sie vue Einzelne Dateikomponenten

Gemäß den beiden oben genannten Kategorien ist die direkte Einführung der vue.js-Datei wie die direkte Einführung von jQuery in die Seite und kann nur einige grundlegende APIs und eingeschränkte Funktionen verwenden Wird im Allgemeinen hauptsächlich für Anfänger und kleine Projekte verwendet. In diesem Artikel wird hauptsächlich die zweite Art von Vue-Projekten erläutert, die mit Vue, jedoch mit Dateikomponenten, erstellt wurden.

Es gibt viele Möglichkeiten, ein Vue-Projekt zu erstellen. Zuerst müssen wir die entsprechenden Konstruktionswerkzeuge verwenden. Zu den offiziell empfohlenen Build-Tools gehören hauptsächlich Webpack und Browserify. Hier empfehle ich Ihnen, Webpack zum Erstellen zu verwenden. Gleichzeitig müssen wir zusätzlich zu den Build-Tools auch Build-Methoden verwenden. Beispielsweise können wir das Vue-Cli-Gerüst verwenden, um die Basisverzeichnisdatei des Vue-Projekts automatisch zu generieren von Grund auf.

vue-cli build

Wenn Sie das Vue-Cli-Gerüst zum Erstellen eines Vue-Projekts verwenden, müssen Sie nur die folgenden 5 Befehlszeilen eingeben, um ein einfaches Vue-Projekt zu generieren (Voraussetzung ist um Node .js zu installieren):

npm install -g vue-cli
vue init webpack my-project
cd my-project
npm install
npm run dev

Diese Konstruktionsmethode ist nicht für alle Projekte geeignet, und wenn Sie nichts über die automatisch generierten Dateien wissen, wird es sehr schwierig, sie später zu verwalten. Daher wird Anfängern nicht empfohlen, vue-cli zum Erstellen zu verwenden. Stattdessen wird empfohlen, dass jeder ein Vue-Projekt von Grund auf erstellt und dabei auf die von vue-cli generierten Dateien verweist.

Benutzerdefinierter Build

Im Vergleich zum vue-cli-Build ist der benutzerdefinierte Build viel flexibler, erfordert jedoch ein Verständnis der Schritte und Prinzipien des Aufbaus und erhöht auch die Anforderungen. Der benutzerdefinierte Build ist in die folgenden Schritte unterteilt:

Datei-/Ordnererstellung

Package.json-Dateierstellung

Webpack-Konfigurationsdateierstellung

Eintragsdateierstellung

Schreiben von Vue-Komponenten

Routing-Konfiguration

package.json-Datei

Mit dem folgenden Befehl können wir schnell eine package.json-Datei erstellen:

npm init -y

Ändern Sie dann das Skriptkonfigurationselement, fügen Sie Paketierungs- und Komprimierungsbefehle hinzu, fügen Sie Abhängigkeiten hinzu und fügen Sie entsprechende Projektabhängigkeiten hinzu.

Webpack-Konfigurationsdatei

Zweitens müssen wir unsere Webpack-Konfigurationsdatei erstellen. Der Unterschied zum Erstellen anderer Projekte besteht darin, dass die Vue-Einzeldateikomponente mit dem Vue-Loader-Loader geladen werden muss. Gleichzeitig konvertiert der Babel-Loader die ES6-Syntax

Eintragsdatei

Hier müssen wir die Datei „entry.js“ der im Webpack konfigurierten Eintragsdateiadresse schreiben. Die Hauptfunktion besteht darin, die generierte Vue-Instanz-App mit der ID der App auf dem DOM-Knoten bereitzustellen

Dann brauchen wir Um die endgültige einfache Vue-Komponente index.vue zu schreiben, legen Sie sie im Ordner „views“ ab.

In diesem Artikel werden hauptsächlich zwei Möglichkeiten zum Erstellen eines Vue-Projekts vorgestellt. Der vue-cli-Build und der benutzerdefinierte Build haben ihre anwendbaren Bereiche und Objekte .Jeder muss basierend auf dem Projekt und seinen eigenen Bedingungen die beste Wahl treffen. Gleichzeitig gibt es viele funktionale Konfigurationen in der Sonderanfertigung, die in diesem Artikel nicht erwähnt werden .

Das obige ist der detaillierte Inhalt vonVue-Projektkonstruktion und praktisches Beispiel-Tutorial. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!