So starten Sie ein vue.js-Projekt

Methode: 1. Installieren Sie node.js; 2. Installieren Sie das Gerüstbautool vue-cli. 3. Verwenden Sie den Befehl „vue init webpack project name“, um das Projekt zu erstellen Abhängigkeiten; 5. Verwenden Sie den Befehl „npm run dev“, um das Projekt auszuführen.

Die Betriebsumgebung dieses Tutorials: Windows7-System, Vue2.9.6-Version, Dell G3-Computer.

Verwandte Empfehlungen: „vue.js Tutorial“

Listen Sie zunächst auf, was wir brauchen:

• node.js-Umgebung (npm-Paketmanager)
• vue-cli-Gerüstbau-Tool
• cnpm npms Taobao-Spiegel

Node.js installieren

Node von der offiziellen Website von node.js herunterladen und installieren. Der Installationsprozess ist sehr einfach, nur „nächster Schritt“ (dumme Installation).

Öffnen Sie nach Abschluss der Installation das Befehlszeilentool und geben Sie node -v ein, wie unten gezeigt. Wenn die entsprechende Versionsnummer angezeigt wird, ist die Installation erfolgreich.

Der npm-Paketmanager ist in den Knoten integriert. Daher werden durch die direkte Eingabe von npm -v die npm-Versionsinformationen wie unten gezeigt angezeigt.

OK! Die Knotenumgebung wurde installiert und der npm-Paketmanager ist ebenfalls verfügbar. Da einige npm-Ressourcen blockiert sind oder fremde Ressourcen sind, schlägt die Installation von Abhängigkeitspaketen mit npm häufig fehl. Daher benötige ich auch den inländischen Spiegel von npm – cnpm.

Installieren Sie cnpm

Geben Sie npm install -g cnpm --registry=http://registry.npm.taobao.org in die Befehlszeile ein und warten Sie, bis die Installation abgeschlossen ist.

Nach Abschluss können wir cnpm anstelle von npm verwenden, um Abhängigkeitspakete zu installieren.

Installieren Sie das vue-cli-Scaffolding-Build-Tool

Führen Sie den Befehl cnpm install -g vue-cli in der Befehlszeile aus und warten Sie, bis die Installation abgeschlossen ist. (Beachten Sie, dass hier cnpm anstelle von npm verwendet wird, da sonst die Geschwindigkeit sehr langsam ist und stecken bleibt)

Nach den oben genannten drei Schritten sind die Umgebung und die Tools, die wir vorbereiten müssen, bereit, und dann können wir beginnen Verwenden von vue-cli zum Erstellen des Projekts.

Erstellen Sie das Projekt mit vue-cli

Um das Projekt zu erstellen, müssen wir zuerst das Verzeichnis auswählen und dann das Verzeichnis in das ausgewählte Verzeichnis in der Befehlszeile ändern. Hier wähle ich den Desktop zum Speichern des neuen Projekts aus, dann müssen wir zuerst das Verzeichnis auf den Desktop kopieren, wie unten gezeigt.

Führen Sie im Desktop-Verzeichnis den Befehl vue init webpack firstVue in der Befehlszeile aus. Erklären Sie diesen Befehl. Dieser Befehl bedeutet, ein Projekt zu initialisieren, in dem Webpack das Build-Tool ist, dh das gesamte Projekt basiert auf Webpack. Unter diesen ist firstVue der Name des gesamten Projektordners. Dieser Ordner wird automatisch in dem von Ihnen angegebenen Verzeichnis generiert (in meinem Beispiel wird der Ordner auf dem Desktop generiert), wie unten gezeigt.

Beim Ausführen des Initialisierungsbefehls wird der Benutzer aufgefordert, mehrere grundlegende Optionen einzugeben, z. B. Projektname, Beschreibung, Autor und andere Informationen. Wenn Sie die Eingabe nicht ausfüllen möchten, drücken Sie einfach die Eingabetaste Standard.

Öffnen Sie den ersten Vue-Ordner. Die Projektdatei lautet wie folgt.

Dies ist die Verzeichnisstruktur des gesamten Projekts, wobei wir hauptsächlich Änderungen im src-Verzeichnis vornehmen. Dieses Projekt ist immer noch nur ein struktureller Rahmen und die für das gesamte Projekt erforderlichen abhängigen Ressourcen wurden noch nicht installiert, wie unten gezeigt.

Installieren Sie die für das Projekt erforderlichen Abhängigkeiten

Um das Abhängigkeitspaket zu installieren, wechseln Sie zunächst mit cd in den Projektordner (Ordner „firstVue“), führen Sie dann den Befehl „cnpm install“ aus und warten Sie auf die Installation.

Nach Abschluss der Installation befindet sich im Ordner firstVue unseres Projektverzeichnisses ein zusätzlicher Ordner node_modules, der die Abhängigkeitspaketressourcen enthält, die unser Projekt benötigt.

Nach der Installation der Abhängigkeitspakete können Sie das gesamte Projekt ausführen.

Führen Sie das Projekt aus

Führen Sie im Projektverzeichnis den Befehl npm run dev aus, der unsere Anwendung mit Hot Loading ausführt, sodass wir den geänderten Code in Echtzeit sehen können, ohne den Browser nach der Codeänderung manuell zu aktualisieren .

Hier ist eine kurze Einführung in den Befehl npm run dev. Der Befehl „run“ entspricht dem dev im Feld „scripts“ in der Datei package.json, das eine Verknüpfung zum Knoten build/dev-server darstellt. js-Befehl.

Nachdem das Projekt erfolgreich ausgeführt wurde, öffnet der Browser automatisch localhost:8080 (wenn der Browser nicht automatisch geöffnet wird, können Sie ihn manuell eingeben). Nach erfolgreicher Ausführung sehen Sie die unten gezeigte Oberfläche.

Wenn Sie diese Seite sehen, bedeutet das, dass das Projekt erfolgreich läuft.

Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Einführung in die Programmierung! !

Das obige ist der detaillierte Inhalt vonSo starten Sie ein vue.js-Projekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!