So erstellen Sie ein Vue-Projekt mit vscode

1. Installieren Sie Vscode, NodeJS usw. im Voraus.

2. Die globale Installation von vue-cli kann uns helfen, Vue-Projekte schnell zu erstellen.

Installationsbefehl:

npm install -g vue-cli

Öffnen Sie das VScode-Terminal und rufen Sie das Befehlseingabefeld auf. Klicken Sie auf Terminal-Neues Terminal, geben Sie den obigen Befehl ein, drücken Sie die Eingabetaste und warten Sie, bis die Installation abgeschlossen ist.

3. Installieren Sie Webpack, ein Tool zum Packen von js

Installationsbefehl:

npm install -g webpack

Die Installationsmethode ist die gleiche wie über.

4. Nachdem die Installation abgeschlossen ist, können Sie mit der Erstellung des Vue-Projekts beginnen. Erstellen Sie zunächst einen Ordner zum Speichern Ihres Projekts, öffnen Sie den entsprechenden Ordner mit vscode und wechseln Sie in den entsprechenden Ordner im Terminal. Mein Ordner ist beispielsweise myvue

Befehl „Projekt erstellen“, geben Sie Folgendes ein:

vue init webpack myvue

wobei myvue der Projektname ist, wählen Sie ihn nach Ihren Wünschen aus.

Dann erscheinen einige Konfigurationselemente, die nach Bedarf konfiguriert werden können, oder sie können auf Standardwerte gesetzt werden und drücken Sie einfach die Eingabetaste.

Warten Sie dann weiter auf die Installation der Abhängigkeiten. Nach Abschluss wird ein grundlegendes Vue-Projekt erstellt. Nach Abschluss sehen Sie auf der linken Seite von vscode das folgende Verzeichnis, dessen Eingang main.js ist.

Führen Sie dann das Projekt aus, wechseln Sie zunächst in den Projektordner, cd myvue und geben Sie dann den folgenden Befehl ein:

npm run dev

Geben Sie nach dem Erfolg :http://localhost:8080 in den Browser ein. Wenn Sie den folgenden Bildschirm sehen, ist der Vorgang erfolgreich.

6. Projektverpackung und Online-Freigabe

Geben Sie den Befehl ein:

npm run build

Nach Abschluss erscheint ein dist-Ordner im Projekt Ordner , der den gepackten Inhalt enthält und direkt bereitgestellt werden kann.

Empfohlene verwandte Artikel und Tutorials: Vscode-Tutorial

Das obige ist der detaillierte Inhalt vonSo erstellen Sie ein Vue-Projekt mit vscode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!