Einführung von Vue CLI und benutzerdefinierten Komponenten

  • 1 Minute

Obwohl es möglich ist, eine gesamte Vue.js-Anwendung in einer einzigen JavaScript-Datei zu erstellen, wird ihre Verwaltung immer schwieriger, je größer die Anwendung wird. Um das Aufteilen Ihrer Anwendung in kleinere Einheiten zu unterstützen, können Sie mithilfe von Vue Komponenten erstellen. Komponenten sind wiederverwendbare Bausteine, aus denen Ihre Anwendung erstellen können.

Komponenten können als JavaScript-Dateien oder in Form von einer Einzeldatei-Komponente mit der Erweiterung .vue erstellt werden. Einzeldatei-Komponenten verwenden eine spezielle Syntax, die von Browsern nicht gelesen werden kann. Diese Syntax muss in den entsprechenden JavaScript-, HTML- und CSS-Code konvertiert werden. Der Vorgang der Konvertierung einer speziellen Syntax in eine vom Browser lesbare Syntax wird als Bündelung bezeichnet und erfordert zusätzliche Tools wie WebPack.

Zum Glück bietet Vue auch eine Kommandozeilenschnittstelle (CLI), mit der Sie ein Bootstrap für eine Anwendung durchführen können. Die CLI konfiguriert alle erforderlichen Tools, einschließlich eines Bundlers und eines Development Servers.

In diesem Modul untersuchen Sie die folgenden Vorgänge:

  • Verwenden Sie Vue CLI zum Erstellen einer Anwendung.
  • Erstellen Sie Einzeldatei-Komponenten.
  • Verwenden Sie die Eigenschaften, um Werte an Komponenten zu übergeben.

Voraussetzungen:

  • Grundlegende Kenntnisse von Vue.js
  • Kenntnisse zu HTML und CSS
  • JavaScript-Kenntnisse
  • Kenntnisse zu Vue.js-Anweisungen
  • Visual Studio Code
  • Node.js

Hinweis

Rufen Sie den Code der Lösung für dieses Modul ab, indem Sie das Repository klonen und den folgenden Befehl in einer Befehlszeile oder in einem Terminalfenster ausführen:

git clone https://github.com/MicrosoftDocs/mslearn-vue-components
cd mslearn-vue-components/end
code .