Schnellstart #

Vue Online ausprobieren #

• Um schnell einen Überblick über Vue zu bekommen, können Sie es direkt in unserer Playground ausprobieren.

• Wenn Sie ein einfaches HTML-Setup ohne Build-Schritte bevorzugen, können Sie dies verwenden JSFiddle as your starting point.

• Wenn Sie bereits mit Node.js und dem Konzept von Build-Tools vertraut sind, können Sie auch ein komplettes Build-Setup direkt in Ihrem Browser auf StackBlitz.

Vue-Anwendung erstellen #

In diesem Abschnitt werden wir Ihnen zeigen, wie Sie ein Vue Single Page Application auf Ihrem lokalen Rechner erstellen können. Das erstellte Projekt wird ein Build-Setup verwenden, das auf Vite basiert und uns erlaubt, Vue Single-File Components (SFCs) zu verwenden.

Stellen Sie sicher, dass Sie eine aktuelle Version von Node.js installiert haben, und führen Sie dann den folgenden Befehl in Ihrer Befehlszeile aus (ohne das > Zeichen):

> npm init vue@latest

Mit diesem Befehl wird create-vue, Vue-Projektgerüstwerkzeug, installiert und ausgeführt. Sie werden aufgefordert, mehrere optionale Funktionen wie TypeScript und Testunterstützung zu aktivieren:

✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

Scaffolding project in ./<your-project-name>...
Done.

Wenn Sie sich bei einer Option unsicher sind, wählen Sie einfach No indem Sie die Eingabetaste drücken. Sobald das Projekt erstellt ist, folgen Sie den Anweisungen zur Installation der Abhängigkeiten und zum Starten des Entwicklungsservers:

> cd <your-project-name>
> npm install
> npm run dev

Sie sollten nun Ihr erstes Vue-Projekt zum Laufen gebracht haben! Beachten Sie, dass die Beispielkomponenten in dem generierten Projekt mit der Composition API und <script setup> geschrieben wurden, und nicht mit der Options API. Hier sind einige zusätzliche Tipps:

• Die empfohlene IDE-Konfiguration ist Visual Studio Code + Volar extension. Wenn Sie andere Editoren verwenden, sehen Sie sich den IDE support section.
• Weitere Details zum Tooling, einschließlich der Integration mit Backend-Frameworks, werden im Tooling Guide behandelt.
• Um mehr über das grundlegende Entwicklungstool Vite zu erfahren, lesen Sie die Vite docs.
• Wenn Sie TypeScript verwenden möchten, lesen Sie den TypeScript Usage Guide.

Wenn Sie bereit sind, Ihre Anwendung in Produktion zu geben, führen Sie Folgendes aus:

> npm run build

Dadurch wird ein produktionsfähiger Build Ihrer Anwendung im Verzeichnis ./dist des Projekts erstellt. Lesen Sie den Production Deployment Guide um mehr über den Einsatz Ihrer Anwendung in der Produktion zu erfahren.

Nächste Schritte >

Vue über CDN nutzen #

Sie können Vue direkt von CDNs über ein Script-Tag verwenden:

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

In diesem Beispiel nutzen wir unpkg, aber Sie können jedes CDN nutzen, das npm-Pakete zur Verfügung stellt, zum Beispiel jsdelivr oder cdnjs. Natürlich können Sie diese Datei auch herunterladen und sich selbst zur Verfügung stellen.

Bei der Verwendung von Vue aus einem CDN gibt es keinen "Build-Schritt". Das macht die Einrichtung viel einfacher und eignet sich für die Verbesserung von statischem HTML oder die Integration mit einem Backend-Framework. Allerdings können Sie nicht die Single-File Component (SFC) Syntax verwenden.

Verwenden des globalen Builds #

Der obige Link lädt den globalen Build von Vue, in dem alle Top-Level-APIs als Eigenschaften des globalen Vue-Objekts dargestellt werden. Hier ist ein vollständiges Beispiel, das den globalen Build verwendet:

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">{{ message }}</div>

<script>
  const { createApp } = Vue

  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>

JSFiddle demo

Verwenden des ES Module Builds #

Im weiteren Verlauf der Dokumentation werden wir hauptsächlich die ES-Module-Syntax verwenden. Die meisten modernen Browser unterstützen jetzt ES-Module nativ, so dass wir Vue von einem CDN über native ES-Module wie dieses verwenden können:

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>

Beachten Sie, dass wir <script type="module"> verwenden und die importierte CDN URL stattdessen auf den ES modules build von Vue verweist.

JSFiddle demo

Import maps aktivieren #

Im obigen Beispiel importieren wir von der vollständigen CDN-URL, aber in der restlichen Dokumentation werden Sie Code wie diesen sehen:

import { createApp } from 'vue'

Wir können dem Browser beibringen, wo der vue-Import zu finden ist, indem wir Import Maps verwenden:

<script type="importmap">
  {
    "imports": {
      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
    }
  }
</script>

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp } from 'vue'

  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>

JSFiddle demo

Sie können der Import-Map auch Einträge für andere Abhängigkeiten hinzufügen - stellen Sie jedoch sicher, dass diese auf die ES-Modulversion der Bibliothek verweisen, die Sie verwenden möchten.

Aufteilung der Module #

Wenn wir tiefer in den Leitfaden eintauchen, müssen wir unseren Code möglicherweise in separate JavaScript-Dateien aufteilen, damit sie leichter zu verwalten sind. Zum Beispiel:

<!-- index.html -->
<script type="module">
  import { createApp } from 'vue'
  import MyComponent from './my-component.js'

  createApp(MyComponent).mount('#app')
</script>

// my-component.js
export default {
  data() {
    return { count: 0 }
  },
  template: `<div>count is {{ count }}</div>`
}

Wenn Sie die obige index.html direkt in Ihrem Browser öffnen, werden Sie feststellen, dass sie einen Fehler auslöst, weil ES-Module nicht über das Protokoll file:// arbeiten können. Damit dies funktioniert, müssen Sie Ihre index.html über das Protokoll http:// mit einem lokalen HTTP-Server bereitstellen.

Um einen lokalen HTTP-Server zu starten, installieren Sie zunächst Node.js und führen dann npx serve von der Kommandozeile aus in demselben Verzeichnis aus, in dem sich Ihre HTML-Datei befindet. Sie können auch jeden anderen HTTP-Server verwenden, der statische Dateien mit den richtigen MIME-Typen verarbeiten kann.

Sie haben vielleicht bemerkt, dass das importierte Komponenten-Template als JavaScript-String eingefügt ist. Wenn Sie VSCode verwenden, können Sie die Erweiterung es6-string-html installieren und den Strings einen /*html*/-Kommentar voranstellen, um eine Syntaxhervorhebung für sie zu erhalten.

Verwenden der Composition API ohne einen Build-Schritt #

Viele der Beispiele für Composition API werden die Syntax <script setup> verwenden. Wenn Sie beabsichtigen, Composition API ohne einen Build-Schritt zu verwenden, lesen Sie die Verwendung der Option setup().

Nächste Schritte #

Wenn Sie die Einführung übersprungen haben, empfehlen wir Ihnen dringend, diese zu lesen, bevor Sie mit dem Rest der Dokumentation fortfahren.