Detaillierte Erklärung der node.js-Installation und HbuilderX-Konfiguration

Tutorial zur npm-Installation:

1. Laden Sie das Node.js-Installationspaket herunter

Offizielle Website: https://nodejs.org/en/

2. Bevor wir sie verwenden, wollen wir zunächst verstehen, wofür diese drei Dinge verwendet werden.

webpack: Sein Hauptzweck besteht darin, alle statischen Ressourcen vorzubereiten, die auf der Browserseite über die CommonJS-Syntax freigegeben werden müssen, z. B. das Zusammenführen und Verpacken von Ressourcen.

vue-cli: Benutzergenerierte Vue-Projektvorlage. (Hilft Ihnen dabei, schnell ein Vue-Projekt zu starten, d. h. es stellt Ihnen einen Satz von Vue-Strukturen bereit, einschließlich grundlegender Abhängigkeitsbibliotheken, die einfach mit „npm install“ installiert werden können.)

Wie in der Abbildung gezeigt, ist die jetzt heruntergeladene Version 14.16.0 LTS (derzeit für Benutzer empfohlen):

Doppelklicken Sie zum Installieren

1. Zunächst sehen wir, dass der Standardpfad das Laufwerk C ist. Hier nehmen wir das Laufwerk D als Beispiel für die Installation: d:\node.js

Klicken Sie durchgehend auf Weiter

Klicken Sie auf Fertig stellen

Als nächstes gewinnen wir + r Tastenkombination

Wir geben echo %PATH% ein

Wir geben node -v und npm -v ein

Werfen wir einen Blick auf C:\Users\Administrator\AppData\Roaming

Wir können sehen, dass das lokale Repository von npm im Benutzerverzeichnis des Systemlaufwerks C ausgeführt wird (npm-cache wird nicht angezeigt, da es nicht verwendet wurde. Das Cache-Verzeichnis wird generiert, sobald es verwendet wird). Wir versuchen, diese beiden Verzeichnisse zurück nach D:\nodejs zu verschieben

Erstellen Sie zunächst zwei Verzeichnisse wie unten gezeigt

Führen Sie dann die folgenden 2 Befehle aus

npm-Konfigurationssatzpräfix „D:\nodejs\node_global“
npm-Konfigurationssatz-Cache "D:\nodejs\node_cache"

Schauen wir uns, wie unten gezeigt, das lokale Repository von npm an und geben den Befehl npm list -global ein.

Geben Sie den Befehl npm config set registry=http://registry.npm.taobao.org ein, um die Mirror-Site zu konfigurieren

Geben Sie den Befehl npm config list ein, um alle Konfigurationsinformationen anzuzeigen. Konzentrieren wir uns auf eine Konfigurationsdatei.

C:\Benutzer\Administrator.npmrc

Mithilfe von txt-Text oder einem Texteditor können wir jetzt die Konfigurationsinformationen sehen:

Überprüfen Sie, ob die Spiegelstation funktioniert. Befehl 1

npm config - Registrierung abrufen 

Überprüfen Sie, ob die Spiegelstation in Ordnung ist. Befehl 2
Npm info vue, um zu sehen, ob Sie Informationen zu vue erhalten können

Beachten Sie, dass zu diesem Zeitpunkt das Standardmodulverzeichnis D:\nodejs\node_modules in das Verzeichnis D:\nodejs\node_global\node_modules geändert wird.
Wenn Sie Befehle wie „npm install“ direkt ausführen, wird ein Fehler gemeldet.
Wir müssen eines tun:
1. Fügen Sie die Umgebungsvariable NODE_PATH hinzu. Der Inhalt lautet: D:\nodejs\node_global\node_modules

(Beachten Sie, dass Sie für die folgenden Vorgänge CMD erneut öffnen müssen, damit die oben genannten Umgebungsvariablen wirksam werden.)

1. Testen Sie die NPM-Installation von vue.js

Befehl: npm install vue -g
Das -g bedeutet hier die Installation im globalen Verzeichnis

Werfen wir einen Blick darauf: D:\nodejs\node_global\node_modules\vue

2. Testen Sie die NPM-Installation des Vue-Routers

Befehl: npm install vue-router -g

Führen Sie npm install vue-cli -g aus, um das Vue-Scaffolding zu installieren.

Fügen Sie D:\nodejs\node_global zur Pfadumgebungsvariablen hinzu
Bei Versionen unter Windows 10 wird der PATH horizontal angezeigt. Bitte beachten Sie, dass beim Hinzufügen am Ende kein Semikolon [;] verwendet werden darf.

Öffnen Sie CMD erneut und testen Sie, ob Vue ordnungsgemäß funktioniert.

Beachten Sie, dass das Vue-CLI-Tool integrierte Vorlagen einschließlich Webpack und Webpack-Simple hat. Ersteres ist für komplexere und professionellere Projekte gedacht.
Seine Konfiguration befindet sich nicht vollständig im Stammverzeichnis von webpack.config.js.

Initialisierung, Installationsabhängigkeiten:
Wählen Sie bei der Installation „vue-router installieren“? Ja und alle anderen sind Nein

Führen Sie npm install aus, um Abhängigkeiten zu installieren

Führen Sie „npm run dev“ aus.
Geben Sie npm run dev in den DOS-Befehl ein

Öffnen Sie http://localhost:8080 wie aufgefordert in Ihrem Browser.

Den Browser automatisch öffnen: http://localhost:8080/#/

Geben Sie im DOS-Befehl ein: npm run build

Generieren Sie statische Dateien und öffnen Sie die neu generierte Datei index.html im Ordner „dist“

Als nächstes verwenden wir das Hbuilderx-Tool, um Node.js und npm zu konfigurieren

Offizielle Website: https://www.dcloud.io/hbuilderx.htmlHubilderX-Link

Geben Sie npm run dev im Terminal ein, um das Projekt auszuführen

Dies ist das Ende dieses Artikels über die Installation von node.js und die Konfiguration von HbuilderX. Weitere relevante Inhalte zur Konfiguration von node.js und HbuilderX finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!