So erstellen Sie Vue in vscode

Mit der kontinuierlichen Weiterentwicklung der Front-End-Technologie beginnen immer mehr Unternehmen und Teams, das Vue-Framework für die Entwicklung zu übernehmen. Das hervorragende Design und das leistungsstarke Ökosystem des Vue-Frameworks sind zu den Gründen geworden, warum sich immer mehr Entwickler für Vue entscheiden. Im eigentlichen Projektprozess kann eine effiziente Entwicklungsumgebung die Entwicklungseffizienz erheblich verbessern. In diesem Artikel wird der eigentliche Prozess der Erstellung eines Vue-Projekts in VSCode anhand einer Demo-Demonstration vorgestellt.

Umgebungsvorbereitung

Bevor Sie mit der Erstellung eines Vue-Projekts beginnen, müssen Sie sicherstellen, dass die erforderliche Software wie Node.js, Vue-CLI und VSCode installiert ist. Wenn es noch nicht installiert wurde, befolgen Sie bitte die folgenden Schritte, um es zu installieren.

Node.js installieren

Node.js ist eine JavaScript-Laufzeitumgebung basierend auf der Chrome V8-Engine, die die Ausführung von JavaScript auf der Serverseite ermöglicht. Dieser Artikel verwendet Node.js Version 14.17.3 und die Download-Adresse lautet https://nodejs.org/en/download/.

Vue-CLI installieren

Vue-CLI ist ein offizielles Gerüsttool, das uns dabei helfen kann, Vue-Projekte schnell zu erstellen. Geben Sie zur Installation den folgenden Befehl im Terminal oder in der Befehlszeile ein:

# 全局安装Vue-CLI
npm install -g @vue/cli

VSCode installieren

VSCode ist ein leichter und leistungsstarker plattformübergreifender Code-Editor, der mehrere Programmiersprachen unterstützt. Die Download-Adresse lautet https://code.visualstudio.com/.

Erstellen Sie das Projekt

Nach der Installation der erforderlichen Software können wir mit der Erstellung des Vue-Projekts beginnen. Geben Sie im Terminal oder in der Befehlszeile den folgenden Befehl ein, um ein Projekt zu erstellen:

# 创建项目
vue create demo

Unter anderem ist Demo der Projektname, der entsprechend der tatsächlichen Situation geändert werden kann. Nachdem Sie das Projekt erstellt haben, gelangen Sie zu folgender Oberfläche:

Hier können wir wählen, ob wir die Standardeinstellungen oder manuelle Konfigurationsoptionen verwenden möchten. Zu den manuellen Konfigurationsoptionen gehören:

• Wählen Sie die Vue-Version, einschließlich der Versionen 2.x und 3.x;
• Ob Sie ESLint, Prettier und andere Code-Spezifikationstools verwenden möchten; Ob häufig verwendete Plug-Ins wie Vue Router und Vuex verwendet werden sollen.
• Wir können es entsprechend den tatsächlichen Anforderungen einstellen. Drücken Sie nach Abschluss die Eingabetaste und warten Sie, bis die Projekterstellung abgeschlossen ist.
• Nachdem das Projekt erstellt wurde, können wir VSCode verwenden, um das Projektverzeichnis zu öffnen. Wählen Sie in VSCode „Datei“ → „Ordner öffnen“, suchen Sie den Demo-Ordner, den wir gerade erstellt haben, und öffnen Sie ihn.

Führen Sie das Projekt aus

Nachdem wir das Projekt in VSCode geöffnet haben, können wir das Projektverzeichnis über das Terminal oder die Befehlszeile aufrufen und das Projekt ausführen. Geben Sie im Terminal oder in der Befehlszeile den folgenden Befehl ein:

# 进入项目目录
cd demo

# 运行项目
npm run serve

Nach Eingabe des Eintrags wird ein lokaler Entwicklungsserver gestartet und folgende Informationen ausgegeben:

 DONE  Compiled successfully in 4311ms                                                                        14:32:18

  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.0.9:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

Besuchen Sie http://localhost:8080/ im Browser, Wir können sehen, dass Sie zur Vue-Projektseite gehen, die Sie gerade erstellt haben.

Debuggen des Projekts

Bei der Entwicklung eines Vue-Projekts ist das Debuggen ein sehr wichtiger Link. Als hervorragender Code-Editor bietet VSCode umfangreiche Debugging-Funktionen, um das Debuggen während des Entwicklungsprozesses zu erleichtern. Als Nächstes stellen wir vor, wie Sie das Vue-Projekt in VSCode debuggen.

Öffnen Sie zunächst das Bedienfeld „Debug“ in VSCode. Wählen Sie in der Dropdown-Liste „Starten und Debuggen“ die Option „Launch.json-Datei erstellt“.

Als nächstes wählen Sie das Vue-Projekt im Popup-Fenster aus:

Nach der Auswahl des Vue-Projekts erstellt VSCode automatisch eine launch.json-Datei und füllt eine Standard-Debugging-Konfiguration aus.

Jetzt können wir eine .vue-Datei in VSCode öffnen und den Haltepunkt auf der linken Seite davon auswählen. Greifen Sie dann im Browser auf http://localhost:8080/ zu und führen Sie die Funktionen auf der Seite aus, um den Haltepunkt auszulösen.

Zusammenfassung

Dieser Artikel beschreibt den tatsächlichen Projektprozess zum Erstellen von Vue in VSCode. Wir stellen den grundlegenden Prozess der tatsächlichen Entwicklung vor, von der Vorbereitung der Umgebung über die Projekterstellung, die Ausführung des Projekts bis hin zum Debuggen des Projekts, und verwenden Demonstrationen und Screenshots, um den Lesern ein besseres Verständnis des Prozesses der Erstellung tatsächlicher Vue-Projekte zu ermöglichen.

Um ein Vue-Entwicklungsmeister zu werden, müssen Sie neben der Beherrschung von Technologie und Werkzeugen auch kontinuierlich lernen und üben. Dieser Artikel ist nur eine einfache Einführungsanleitung. Ich hoffe, dass die Leser auf dieser Grundlage weiterhin mehr Features und Funktionen des Vue-Frameworks kennenlernen und erkunden können.

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