Vue mit VSCode entwickeln
Visual Studio Code (VS Code) ist ein kostenloser, quelloffener Code-Editor, der von Microsoft entwickelt wurde, mehrere Programmiersprachen unterstützt und Funktionen wie Syntaxhervorhebung, intelligente Codevervollständigung, Code-Refactoring und Debugging bietet.
Visual Studio Code bietet integrierte Unterstützung für die zentralen Bausteine von Vue.js: HTML, CSS und JavaScript.
VS Code verfügt über ein integriertes Terminal, mit dem Sie Kommandozeilen-Tools wie npm und yarn direkt im Editor ausführen können, was das Erstellen und Verwalten von Projekten komfortabel macht.
Wenn Sie eine umfangreichere Vue.js-Entwicklungsumgebung wünschen, können Sie die Erweiterungen Volar und Volar for TypeScript installieren, die IntelliSense für Vue.js bereitstellen.
Wenn Sie VS Code noch nicht kennen oder es noch nicht installiert haben, können Sie Folgendes konsultieren:VSCode-Tutorial。
Vue-Projekt erstellen
Öffnen Sie ein Terminal oder eine Eingabeaufforderung und geben Sie den folgenden Befehl ein:
npm create vue@latest
Das System fordert Sie zur Eingabe eines Projektnamens auf. Hier gebe ichexample-vue3-app ein：
Vue.js - The Progressive JavaScript Framework ? 请输入项目名称： › example-vue3-app
Danach erscheinen einige Optionen. Sie können sie nach Ihren Bedürfnissen auswählen oder einfach durchgehend die Eingabetaste drücken:
Vue.js - The Progressive JavaScript Framework > 请输入项目名称： … example-vue3-app > 是否使用 TypeScript 语法？ … 否 / 是 > 是否启用 JSX 支持？ … 否 / 是 > 是否引入 Vue Router 进行单页面应用开发？ … 否 / 是 > 是否引入 Pinia 用于状态管理？ … 否 / 是 > 是否引入 Vitest 用于单元测试？ … 否 / 是 > 是否要引入一款端到端（End to End）测试工具？ › 不需要 > 是否引入 ESLint 用于代码质量检测？ › 否 正在初始化项目 /Users/tianqixin/example-vue3-app... 项目初始化完成，可执行以下命令： cd example-vue3-app npm install npm run dev
Nachdem das Projekt erstellt wurde, wechsle in den Projektordner und installiere die Abhängigkeiten:
cd example-vue3-app npm install
Die Installation der Abhängigkeiten kann ebenfalls ein paar Minuten dauern.
Geben Sie den folgenden Befehl ein, um Ihre Vue-App schnell zu starten:
npm run dev
Öffne http://localhost:5173 im Browser, und es wird wie folgt angezeigt:
Drücke Ctrl+C, um den vue-cli-service-Server zu stoppen.
Vue-Projekt in VS Code öffnen
Gehen Sie im Terminal oder in der Eingabeaufforderung in den Vue-Projektordner, den wir erstellt haben, example-vue3-app, und verwenden Sie dann dencode-Befehl, um das Projekt in VS Code zu öffnen:
cd example-vue3-app code .
VS Code wird gestartet und zeigt dein Vue-Projekt im Datei-Explorer an, wie unten dargestellt:
Wählen Sie einfach Installieren.
Nach der Installation werden .vue-Dateien als Vue.js-Dateitypen erkannt und unterstützen die folgenden Sprachfunktionen:
- Syntaxhervorhebung
- Klammerabgleich
- Hover-Beschreibung
IntelliSense
Wenn Sie Code in App.vue eingeben, sehen Sie IntelliSense für HTML, CSS und Vue.js-spezifische Syntax (wie v-bind, v-for).
Im Script-Abschnitt sehen Sie außerdem Hinweise zu Vue.js-bezogenen JavaScript-Funktionen, wie z. B. die Computed-Eigenschaft.
Gehe zu Definition, Definition einsehen
Durch die installierte Volar-Erweiterung unterstützt VS Code den Vue.js-Sprachdienst.
Platzieren Sie den Cursor auf App, klicken Sie mit der rechten Maustaste und wählen Sie Definition einsehen, um Definitionsinformationen anzuzeigen, oder drücken Sie die Tastenkombination⌥F12。
Sie sehen ein Popup-Fenster, das die Definitionsinformationen von App anzeigt.
Drücken Sie dieEsc-Taste, um das Peek-Fenster zu schließen.
"Hello World" ändern und ausführen
Ersetzen Sie in App.vue den Text des benutzerdefinierten Attributs msg der HelloWorld-Komponente durch "Hello World!":
Beispiel
<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>
Speichern Sie die Datei App.vue (Tastenkürzel⌘SoderCtrl+S), und starten Sie dann den Server mit dem folgenden Befehl neu:
npm run dev
Im Browser sehen Sie, dass die Seite "Hello World!" anzeigt.
