So installieren Sie npm in vue.js

Dieses Mal zeige ich Ihnen, wie Sie npm in vue.js installieren. Was sind die Vorsichtsmaßnahmen bei der Installation von npm in vue.js?

Klären Sie zunächst die Beziehung zwischen nodejs und npm:

node.js ist eine Laufumgebung für Javascript, eine Implementierung von Google V8-Motor der Verpackung. Es handelt sich um einen serverseitigen JavaScript-Interpreter.

Einschlussbeziehung: NodeJS enthält npm. Wenn Sie beispielsweise NodeJS installieren, finden Sie die Versionsnummer von npm, wenn Sie cmd öffnen und npm -v eingeben, was darauf hinweist, dass npm installiert wurde.

Zitat der Zusammenfassung des Masters:

Tatsächlich ist npm der Paketmanager von nodejs. Wenn wir auf Node.js entwickeln, verwenden wir viele Javascript-Codes, die von anderen geschrieben wurden. Wenn wir den Code einer anderen Person benötigen, müssen wir ihn nach Namen durchsuchen, den Quellcode herunterladen, ihn dekomprimieren und dann Verwenden Sie es, es wird sehr mühsam sein. So erschien der Paketmanager npm. Jeder lädt den Quellcode, den er geschrieben hat, auf die offizielle npm-Website hoch. Wenn Sie einen oder mehrere davon verwenden möchten, können Sie ihn direkt über npm installieren, unabhängig davon, wo sich der Quellcode befindet. Und wenn wir Modul A verwenden möchten und Modul A von Modul B abhängt und Modul B von den Modulen C und D abhängt, lädt npm alle abhängigen Pakete herunter und verwaltet sie basierend auf den Abhängigkeitsbeziehungen. Stellen Sie sich vor, wie mühsam es wäre, wenn wir diese ganze Arbeit selbst erledigen müssten!

node -v Sehen Sie sich die node-Version an, die das integrierte npm Paketmanager zum Installieren abhängiger Pakete.

npm install -g typescript

1 Bevor wir es verwenden, wollen wir zunächst verstehen, wofür die drei Dinge verwendet werden.

npm: Paketmanager für Nodejs. Webpack: Sein Hauptzweck besteht darin, alle statischen Ressourcen vorzubereiten, die vom Browser über die CommonJS-Syntax veröffentlicht werden müssen, z. B. das Zusammenführen und Verpacken von Ressourcen. vue-cli: Benutzergenerierte Vue-Projektvorlage. (Hilft Ihnen,

schnell ein Vue-Projekt zu starten, was bedeutet, dass Sie eine Reihe von Vue-Strukturen erhalten, einschließlich grundlegender Abhängigkeitsbibliotheken, die mit nur npm install installiert werden können) Start:

Wie im Bild gezeigt, laden Sie 8.9.3 LTS herunter (empfohlen für die meisten Benutzer)

Zum Installieren doppelklicken

Sie können den Standardpfad verwenden. Ändern Sie ihn in diesem Beispiel in d:nodejs

Klicken Sie auf Weiter

Klicken Sie auf Fertig stellen

Öffnen Sie CMD und prüfen Sie, ob es normal ist

Wenn man sich die anderen beiden Verzeichnisse ansieht, wird das lokale Warehouse von npm im Benutzerverzeichnis des Systemdatenträgers C ausgeführt (der Grund dafür). npm-cache wird nicht angezeigt. Es wurde noch nicht verwendet (es wird generiert, sobald das Cache-Verzeichnis verwendet wird). Erstellen Sie zunächst zwei Verzeichnisse

wie unten gezeigt und führen Sie dann die folgenden 2 Befehle aus: npm config set prefix „D:nodejsnode_global“ npm config set cache „D:nodejsnode_cache“

Wie oben gezeigt, achten wir noch einmal auf das lokale Warehouse von npm. Geben Sie den Befehl npm list -global ein. Registry.npm .taobao.org Konfigurieren Sie die Spiegelstation

Geben Sie den Befehl

npm config list ein, um alle Konfigurationsinformationen anzuzeigen. Wir konzentrieren uns auf eine

Konfigurationsdatei

C:UsersAdministrator.npmrc

Verwenden Sie den Texteditor

, um ihn zu bearbeiten. Sie können die Konfigurationsinformationen gerade sehen

Überprüfen Sie, ob die Spiegelstation in Ordnung ist. Befehl 1 npm config get Registry

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

Beachten Sie, dass es sich zu diesem Zeitpunkt um das Standardmodul handelt Das Verzeichnis D:nodejsnode_modules wird in das Verzeichnis D:nodejsnode_globalnode_modules geändert. 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:nodejsnode_globalnode_modules

(Beachten Sie, dass Sie CMD erneut öffnen müssen, damit dieser Vorgang durchgeführt werden kann Die obige Umgebungsvariable wird wirksam) 1. Testen Sie den NPM-Installationsbefehl vue.js: npm install vue -g Das -g bezieht sich hier auf die Installation im globalen globalen Verzeichnis

2. Testen Sie den NPM-Installations-vue-router-Befehl: npm install vue-router -g

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

Umgebung bearbeiten Pfad bearbeiten

Fügen Sie D:nodejsnode_global zur Pfadumgebungsvariablen hinzu. Bei Versionen unter Win10 wird PATH beim Hinzufügen horizontal angezeigt bis zum Ende sollte kein Semikolon [;] stehen

CMD erneut öffnen und testen, ob Vue ordnungsgemäß funktioniert

Beachten Sie, dass das vue-cli-Tool über integrierte Vorlagen verfügt, einschließlich Webpack und Webpack-Simple. Ersteres ist ein komplexeres und professionelleres Projekt und seine Konfiguration wird nicht vollständig in webpack.config.js im Stammverzeichnis abgelegt.

Initialisierung, Installation von Abhängigkeiten

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

npm run dev

Erfolgsschnittstelle, fordert zum Öffnen der Adresse http://localhost:8080

auf. Automatisches Öffnen des Browsers http://localhost:8080/#/

npm run build generiert statische Dateien. Öffnen Sie die neu generierte Datei index.html im Ordner dist. Die Verzeichnisbeschreibung des neu erstellten vue01 unter nmp:

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:

Wie Axios das 302-Statuscode-Problem löst

JS-Betriebsbild schwarzweiß

Das obige ist der detaillierte Inhalt vonSo installieren Sie npm in vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!