Um Vue zum Entwickeln eines Front-End-Frameworks zu verwenden, müssen Sie zunächst über eine Umgebung verfügen. Diese Umgebung erfordert die Hilfe von Node. Sie müssen also zuerst Node installieren und npm im Node verwenden, um die erforderlichen Abhängigkeiten usw. zu installieren. In diesem Artikel wird hauptsächlich ein einfaches Tutorial zum Aufbau einer Vue-Umgebung vorgestellt, das einen gewissen Referenzwert hat. Ich hoffe, es kann jedem helfen.
①Installieren Sie nodejs
https://nodejs.org
Laden Sie nodejs (lts) bei der Installation herunter, klicken Sie auf „Zustimmen“ und fahren Sie mit dem nächsten Schritt fort .
Es wird mit einem npm geliefert (npm ist ein Paketmanager, wofür wird er verwendet? Es ist ein Lagerhaus, wenn Sie es verwenden müssen, installieren Sie einfach npm packageName)
Test:
②Installieren Sie cnpm (Taobao-Spiegel)
npm install -g cnpm --registry=https://registry.npm.taobao.org
③Installieren Sie vue-cli
Windows-Computer, drücken Sie gleichzeitig widnows+r, geben Sie cmd ein, klicken Sie auf die Eingabetaste, rufen Sie den Befehlszeilenmodus auf; >Geben Sie in der Befehlszeile den folgenden Befehl ein und klicken Sie abschließend auf Enter
(npm install vue-cli -g (cnpm entspricht npm nach der Installation des Taobao-Images)) cnpm install --global vue-cli
④Webpack installieren
npm install webpack -g
④Erstellen Sie ein Vorlagenprojekt gemäß den folgenden Vue-Anweisungen vue-cli ist installiert
Verwenden Sie das vom Lehrer bereitgestellte Vorlagenkomprimierungspaket (tpls.zip) Ich habe tpls.zip in den „Informationen“ unter der Datei hochgeladen und legen Sie es auf dem Laufwerk D ab, erstellen Sie eine neue vue_cli und kopieren Sie jede dekomprimierte Datei nach vue_cli. ⑤Installieren Sie die für das Projekt erforderlichen AbhängigkeitenGeben Sie nach dem Dekomprimieren des obigen Ordners das Verzeichnis ein und führen Sie den Befehl aus:
⑥Führen Sie den Befehl aus und starten Sie den Entwicklungsserver
cnpm install
Hinweis: Wenn die Taobao-Image-Installation fehlschlägt, lautet die Lösung:
npm run dev
Verwandte Empfehlungen:
Beispiel für eine ausführliche Erklärung des Chatrooms für die Eltern-Kind-Kommunikation in Vue-Komponente
Eine detaillierte Erklärung von Vue mithilfe von Scheindaten
So implementieren Sie das Scrollen und Laden weiterer Funktionen in Vue
Das obige ist der detaillierte Inhalt vonDetaillierte Beispiele einfacher Tutorials zum Aufbau einer Vue-Umgebung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!