Verwendung von Vue in Visual Studio Code

Vue.js ist eine beliebte JavaScript-Bibliothek zum Erstellen von Webanwendungen und Benutzeroberflächen. Visual Studio Code verfügt über integrierte Unterstützung für die Vue.js-Bausteine von HTML, CSS und JavaScript. Für eine umfassendere Vue.js-Entwicklungsumgebung können Sie die Erweiterung Vue – Offiziell (früher Volar) installieren, um Unterstützung für IntelliSense, TypeScript, Formatierung und mehr zu erhalten.

Hinweis: Die Unterstützung für Vue 2 endete am 31. Dezember 2023. Daher wird die Verwendung der Erweiterung Vetur nicht empfohlen. Sie müssen Vetur deaktivieren, um die Erweiterung Vue – Offiziell zu verwenden.

Willkommen bei Vue

Wir werden für dieses Tutorial das Vite-Tooling verwenden. Wenn Sie neu im Vue.js-Framework sind, finden Sie großartige Dokumentationen und Tutorials auf der Website vuejs.org.

Um Vite und Vue.js zu installieren und zu verwenden, benötigen Sie die Node.js JavaScript-Laufzeitumgebung und npm (den Node.js-Paketmanager) installiert. npm ist in Node.js enthalten, das Sie von den Node.js-Downloads installieren können.

Tipp: Um zu testen, ob Node.js und npm korrekt auf Ihrem Computer installiert sind, können Sie node --version und npm --version eingeben.

Um zu beginnen, stellen Sie sicher, dass Sie sich im übergeordneten Verzeichnis befinden, in dem Sie ein Projekt erstellen möchten. Öffnen Sie dann Ihr Terminal oder die Eingabeaufforderung und geben Sie Folgendes ein

npm create vue@latest

Sie werden aufgefordert, create-vue zu installieren.

Dies kann einige Minuten dauern, um create-vue zu installieren und auszuführen, was Ihnen hilft, Ihr Vue-Projekt zu strukturieren. Befolgen Sie die Aufforderungen für optionale Funktionen. Sie können "Nein" wählen, wenn Sie sich bei einer Option unsicher sind.

Sobald das Projekt erstellt ist, navigieren Sie hinein und installieren Sie die Abhängigkeiten. Die Installation seiner Abhängigkeiten kann einige Minuten dauern.

cd <your-project-name>
npm install

Lassen Sie uns unsere Vue-Anwendung schnell ausführen, indem Sie npm run dev eingeben, um den Webserver zu starten und die Anwendung im Browser zu öffnen.

npm run dev

Sie sollten "Welcome to your Vue.js App" unter https://:5173 in Ihrem Browser sehen.

Um Ihre Vue-Anwendung in VS Code zu öffnen, navigieren Sie von einem Terminal (oder einer Eingabeaufforderung) in den Ordner vue-project und geben Sie code . ein.

cd vue-project
code .

VS Code wird gestartet und zeigt Ihre Vue-Anwendung im Datei-Explorer an.

Vue – Offizielle Erweiterung

Erweitern Sie nun den Ordner src und wählen Sie die Datei App.vue aus. Sie werden feststellen, dass VS Code keine Syntaxhervorhebung anzeigt und die Datei als Nur-Text behandelt, wie Sie in der Statusleiste unten rechts sehen können. Sie sehen auch eine Benachrichtigung, die die Erweiterung Vue – Offiziell für den Dateityp .vue empfiehlt.

Die Vue-Erweiterung bietet Vue.js-Sprachfunktionen (Syntaxhervorhebung, IntelliSense und Formatierung) für VS Code.

Drücken Sie in der Benachrichtigung auf Installieren, um die Vue-Erweiterung herunterzuladen und zu installieren. Sie sollten sehen, dass die Vue-Erweiterung in der Erweiterungsansicht installiert wird. Sobald die Installation abgeschlossen ist (kann mehrere Minuten dauern), ändert sich die Schaltfläche Installieren zur Schaltfläche Verwalten (Zahnrad).

Sie sollten nun sehen, dass .vue ein erkannter Dateityp für die Vue.js-Sprache ist und Sie Sprachfunktionen wie Syntaxhervorhebung, Klammerabgleich und Hover-Beschreibungen haben.

IntelliSense

Während Sie in App.vue tippen, sehen Sie intelligente Vorschläge oder Vervollständigungen sowohl für HTML und CSS als auch für Vue.js-spezifische Elemente wie Deklarationen (v-bind, v-for) im Vue template-Abschnitt.

und Vue-Eigenschaften wie computed im scripts-Abschnitt.

Gehe zu Definition, Peek Definition

Die offizielle Vue-Erweiterung in VS Code verbessert die Vue.js-Entwicklungserfahrung, indem sie Sprachdienstfunktionen wie Typdefinitionen bereitstellt. Sie können auf diese Funktionen zugreifen, indem Sie

• Zu Definition springen (F12): Navigieren Sie direkt zur Typdefinition in Ihrem Code.
• Definition anzeigen (⌥F12 (Windows Alt+F12, Linux Ctrl+Shift+F10)): Zeigen Sie die Typdefinition inline an, ohne Ihren aktuellen Kontext zu verlassen.

Um Definition anzeigen zu verwenden, befolgen Sie diese Schritte:

1. Platzieren Sie den Cursor über App.
2. Klicken Sie mit der rechten Maustaste, bewegen Sie den Mauszeiger über Peek im Kontextmenü und wählen Sie Definition anzeigen.
3. Ein Peek-Fenster wird geöffnet und zeigt die Definition von App aus App.js an.

Drücken Sie die Escape-Taste, um das Peek-Fenster zu schließen.

Hallo Welt

Lassen Sie uns die Beispielanwendung aktualisieren, um "Hello World!" anzuzeigen. Ersetzen Sie in App.vue den Text des benutzerdefinierten Attributs msg der HelloWorld-Komponente durch "Hello World!".

<template>
  <header>
    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />

    <div class="wrapper">
      <HelloWorld msg="Hello World!" />
    </div>
  </header>

  <main>
    <TheWelcome />
  </main>
</template>

Sobald Sie die Datei App.vue speichern (⌘S (Windows, Linux Ctrl+S)), wird die Hot Module Replacement (HMR)-Funktion von Vite die Updates sofort im Browser widerspiegeln, und Sie sehen "Hello World!". Lassen Sie den Server laufen, während wir uns mit dem Client-seitigen Debugging von Vue.js beschäftigen.

Tipp: VS Code unterstützt Auto Save, das standardmäßig Ihre Dateien nach einer Verzögerung speichert. Überprüfen Sie die Option **Auto Save** im Menü **Datei**, um Auto Save zu aktivieren, oder konfigurieren Sie direkt die Benutzereinstellung files.autoSave Einstellungen.

Linting

Linter analysieren Ihren Quellcode und können Sie vor potenziellen Problemen warnen, bevor Sie Ihre Anwendung ausführen. Das Vue ESLint-Plugin (eslint-plugin-vue) prüft auf Vue.js-spezifische Syntaxfehler, die im Editor als rote Wellenlinien angezeigt werden und auch im Bereich Probleme (Ansicht > Probleme ⇧⌘M (Windows, Linux Ctrl+Shift+M)) angezeigt werden.

Unten sehen Sie einen Fehler, wenn der Vue-Linter mehr als ein Root-Element in einer Vorlage erkennt.

Debugging

Sie können clientseitigen Vue.js-Code mit dem integrierten JavaScript-Debugger debuggen. Folgen Sie diesem Gespräch, um Vite/Vue.js 3-Projekte mit VS Code unter Verwendung von Microsoft Edge zu verwenden.

Für Vue CLI, das sich jetzt im Wartungsmodus befindet, schauen Sie sich das Rezept Vue.js-Debugging in VS Code auf der VS Code-Debugging-Website Rezepte an, um mehr zu erfahren.

Ein weiteres beliebtes Werkzeug zum Debuggen von Vue.js ist das Plugin vue-devtools, das unabhängig von der Umgebung verwendet werden kann.

Andere Erweiterungen

• Suchen Sie in der Erweiterungsansicht (⇧⌘X (Windows, Linux Ctrl+Shift+X)), indem Sie vue eingeben, um weitere Vue-Erweiterungen zu finden.

  

• Erweiterungen wie Vue VS Code Snippets können für Vue-Snippets nützlich sein.

  

• Es gibt auch Erweiterungspakete, die Erweiterungen bündeln, die andere für die Vue.js-Entwicklung als nützlich erachtet haben.