So erstellen Sie eine Webpack-Umgebung mit Vue und Node

Dieses Mal zeige ich Ihnen, wie Sie eine Webpack-Umgebung mit Vue und Node erstellen. Was sind die Vorsichtsmaßnahmen für den Aufbau einer Webpack-Umgebung mit Vue und Node? ein Blick.

1. Umgebungseinrichtung

Gehen Sie zur offiziellen WebsiteInstallierennode.js(http://www. runoob.com /nodejs/nodejs-install-setup.html )

Achten Sie auf die Version des Knotens. Nur Knoten, die den Harmony-Modus unterstützen, unterstützen es6. Beim Erstellen des Projektnamens basierend auf dem Webpack wird kein Fehler gemeldet. Empfehlen Sie die neueste Version.

Klicken Sie nach dem Herunterladen des Installationspakets einfach auf „Installieren“.

Die Befehlszeilenanweisung zum Installieren von Webpack mit npm lautet npm install webpack -g. Die Schnittstelle für eine erfolgreiche Testinstallation ist wie folgt:

Der nächste Schritt besteht darin, vue-cli global zu installieren. Es ist zu beachten, dass die Installation von vue-cli mit npm sehr lange dauert und mehr als zwei Stunden dauern kann

Die Installationsanweisung lautet: npminstall--globalvue-cli

Erstellen Sie ein neues Projekt basierend auf der Webpack-Vorlage

Die Befehlszeilenanweisung lautet vue init webpack my-project (wobei my-project der Dateiname ist und der Dateiname nur aus Kleinbuchstaben bestehen darf). Wenn Sie ein neues Vorlagenprojekt erstellen, müssen Sie zum angegebenen Ordner wechseln.

Geben Sie vue init webpack my-project (Name des Projektordners) in cmd ein, drücken Sie die Eingabetaste, warten Sie einen kurzen Moment, die Elemente unter „git“ werden nacheinander angezeigt,

wird beim Arbeiten erstellt Wenn bei einem neuen Projekt der folgende Fehler gemeldet wird, bedeutet dies, dass die Knotenversion zu niedrig ist und den harmonischen Modus nicht unterstützt (wahrscheinlich bedeutet dies, dass es6 unterstützt wird, andernfalls wird es nicht unterstützt. Sie benötigen Anleitung von einem Einzelheiten erfahren Sie vom Experten) und sollte durch eine höhere Version des Knotens ersetzt werden. Der Fehler ist wie folgt:

Geben Sie in cmd 1) ein: cd my-project (Projektname), drücken Sie die Eingabetaste, geben Sie den spezifischen Projektordner ein

Geben Sie ein: cnpm install, drücken Sie die Eingabetaste, warten Sie eine Weile

Gehen Sie zurück zum Projektordner und Sie werden feststellen, dass es in der Projektstruktur einen zusätzlichen Ordner node_modules gibt (der Inhalt dieser Datei sind die zuvor installierten Abhängigkeiten)

Webstorm-Installation, Projekteinführung

Gehen Sie zur offiziellen Website, um das Webstrom-Installationspaket herunterzuladen und zu installieren.

Fahren Sie als Nächstes fort. Wählen Sie je nach Computersystem die Installation eines 64-Bit-Systems oder eines 32-Bit-Systems. Wählen Sie js, css, html à jetbrainsà und installieren Sie dann

Wählen Sie „Unter Datei im Webstorm öffnen“ (wählen Sie Ihren Projektordner aus)

Es sieht sehr einfach aus, aber ich fürchte, dass ich in ein paar Tagen einen Fehler machen werde.

Ob die Testumgebung erfolgreich eingerichtet wurde

Methode 1: Eingabe in cmd: cnpm rundev

(Natürlich ist es jedes Mal, wenn Sie den Code ändern, ein sehr umständlicher Prozess, jedes Mal zu cmd zu wechseln und Befehle einzugeben. Rufen Sie daher das NPM-Menü in Webstorm auf.

Klicken Sie mit der rechten Maustaste auf die Datei „package.json“ -> klicken Sie auf „npm-Skripts anzeigen“, um das Menü aufzurufen. Um es in Zukunft auszuführen, doppelklicken Sie einfach auf „dev.“ im npm-Menü. Beachten Sie, dass das über die Befehlszeile ausgeführte Projekt und das von der Entwickler ausgeführte Projekt nicht zusammen ausgeführt werden können. Wenn Sie eines ausführen, müssen Sie das andere schließen, da sonst ein Fehler gemeldet wird, dass der Port belegt ist.

)

Methode 2:

Geben Sie im Browser ein: localhost:8080 (der Standardport ist 8080) Wenn Sie den Ausführungsbefehl eingeben, wird ein Fehler gemeldet. Es gibt zwei Situationen, wie in der folgenden Abbildung dargestellt:

Die erste Situation: Hafenbesetzungsproblem

Dann lautet die

Lösung :

Option 1:

Schließen Sie den Port während des Vorgangs. a. Öffnen Sie cmd und geben Sie den Befehl netstat –ano ein. Es werden alle Portnummern angezeigt,

b. Unter der lokalen Adresse steht die Portnummer und die PID ist die Prozessnummer eines Programms, das die Portnummer belegt (merken Sie sich die Prozessnummer)

c. Öffnen Sie den Task-Manager (Strg + Alt +

Entf

), klicken Sie auf „Verarbeiten“, dann auf „Ansicht“, wählen Sie „Spalte auswählen“ und klicken Sie auf „OK“. Das Prozessprogramm belegt den Port d. Suchen Sie die gespeicherte Prozessnummer und schließen Sie

Option 2:

Ändern Sie in der Datei config/index.js die Portnummer. Port: Neue Portnummer.

Zweiter Typ: Die npm-Version ist zu niedrig und muss aktualisiert werden:

Lösung:

a. Geben Sie den Befehl ein: npm install -g npm

b. Kopieren Sie die Dateien unter C:Users{Ihr Windows-Benutzername}AppDataRoamingnpmnode_modulesnpm nach node_modulesnpm in Ihrem NodeJS-Installationsverzeichnis und überschreiben Sie alle Originaldateien

(Oder verwenden Sie die Methode des Benzolvergleichs und gehen Sie die vorherigen Schritte noch einmal durch)

2. Änderungen basierend auf persönlichen Bedürfnissen

1. vue.js ändert die Standard-Portnummer 8080 in den angegebenen Port:

Beim Ausführen von npm run dev wird tatsächlich package.json

im Stammverzeichnis aufgerufen Nach dem Öffnen von package.json finden Sie diesen Codeabschnitt

"scripts":{
"dev":"nodebuild/dev-server.js",
"build":"nodebuild/build.js",
"lint":"eslint--ext.js,.vuesrc"
}

Daraus können wir erkennen, dass wir die Datei dev-server.js im Build-Verzeichnis

überprüfen sollten Gefunden in der dev-server.js-Datei

varuri='http://localhost:'+port

Der Port hier ist das, wonach wir suchen. Am Anfang von dev-server.js finden wir

varpath=require('path')

Und woher kommt der Weg?

Es gibt einen Konfigurationsordner im Stammverzeichnis. Sie können anhand des Namens erkennen, dass er mit der Konfiguration zusammenhängt. Öffnen Sie index.js

dev:{
env:require('./dev.env'),
port:8080,
autoOpenBrowser:true,
assetsSubDirectory:'static',
assetsPublicPath:'/',
proxyTable:{},
cssSourceMap:false
}

im Konfigurationsverzeichnis. Hier kann nicht nur der Port geändert werden, sondern auch andere Konfigurationsinformationen können bei Bedarf geändert werden.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So verwenden Sie den Timer, um die Countdown-Funktion in js zu implementieren

So machen Sie das ausgewählte Tag ungültig= „ausgewähltes“ Attribut Verarbeitung

Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine Webpack-Umgebung mit Vue und Node. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!