Vue.js

Appearance

On this page

Einzelne Dateikomponenten ​

Einführung ​

Vue Single-File Components (auch bekannt als *.vue-Dateien, abgekürzt als SFC) ist ein spezielles Dateiformat, mit dem wir die Vorlage, die Logik und das Styling einer Vue-Komponente in einer einzigen Datei kapseln können. Hier ist ein Beispiel für eine SFC:

vue
<script>
export default {
  data() {
    return {
      greeting: 'Hello World!'
    }
  }
}
</script>

<template>
  <p class="greeting">{{ greeting }}</p>
</template>

<style>
.greeting {
  color: red;
  font-weight: bold;
}
</style>
vue
<script setup>
import { ref } from 'vue'
const greeting = ref('Hello World!')
</script>

<template>
  <p class="greeting">{{ greeting }}</p>
</template>

<style>
.greeting {
  color: red;
  font-weight: bold;
}
</style>

Wie wir sehen können, ist Vue SFC eine natürliche Erweiterung des klassischen Trios aus HTML, CSS und JavaScript. Die Blöcke <template>, <script> und <style> kapseln die Ansicht, Logik und das Styling einer Komponente und vereinen sie in derselben Datei. Die vollständige Syntax ist in der SFC-Syntaxspezifikation definiert.

Warum SFC ​

SFCs erfordern zwar einen Build-Schritt, bieten dafür aber zahlreiche Vorteile:

SFC ist ein charakteristisches Merkmal von Vue als Framework und wird für die Verwendung von Vue in den folgenden Szenarien empfohlen:

  • Single-Page-Anwendungen (SPA)
  • Statische Seitengenerierung (SSG)
  • Jedes nicht triviale Frontend, bei dem ein Build-Schritt für eine bessere Entwicklungserfahrung (DX) gerechtfertigt ist.

Allerdings sind wir uns bewusst, dass es Szenarien gibt, in denen SFCs übertrieben wirken können. Aus diesem Grund kann Vue weiterhin ohne Build-Schritt über einfaches JavaScript verwendet werden. Wenn Sie lediglich weitgehend statisches HTML mit leichten Interaktionen verbessern möchten, können Sie sich auch petite-vue ansehen, eine 6 kB große Teilmenge von Vue, die für progressive Verbesserungen optimiert ist.

So funktioniert es ​

Vue SFC ist ein frameworkspezifisches Dateiformat und muss von @vue/compiler-sfc in Standard-JavaScript und CSS vorkompiliert werden. Ein kompiliertes SFC ist ein Standard-JavaScript-Modul (ES) – das bedeutet, dass Sie mit einer geeigneten Build-Konfiguration ein SFC wie ein Modul importieren können:

js
import MyComponent from './MyComponent.vue'

export default {
  components: {
    MyComponent
  }
}

<style>-Tags innerhalb von SFCs werden während der Entwicklung in der Regel als native <style>-Tags eingefügt, um Hot Updates zu unterstützen. Für die Produktion können sie extrahiert und in einer einzigen CSS-Datei zusammengeführt werden.

Sie können mit SFCs experimentieren und herausfinden, wie sie im Vue SFC Playground kompiliert werden.

In realen Projekten integrieren wir den SFC-Compiler üblicherweise in ein Build-Tool wie Vite oder Vue CLI (das auf webpack basiert). Vue bietet offizielle Scaffolding-Tools, um Ihnen den Einstieg in SFCs zu erleichtern. Weitere Details finden Sie im Abschnitt SFC-Tools.

Wie steht es mit der Trennung der Belange? ​

Manche Nutzer mit einem traditionellen Webentwicklungshintergrund könnten die Befürchtung haben, dass SFCs verschiedene Belange an einem Ort vermischen – etwas, das HTML/CSS/JS eigentlich trennen sollten!

Um diese Frage zu beantworten, ist es wichtig, dass wir uns darüber einig sind, dass Trennung von Belangen nicht gleichzusetzen ist mit der Trennung von Dateitypen. Das oberste Ziel von Entwicklungsprinzipien ist die Verbesserung der Wartbarkeit von Codebasen. Eine dogmatische Anwendung der Trennung von Belangen als Trennung von Dateitypen trägt im Kontext zunehmend komplexer Frontend-Anwendungen nicht dazu bei, dieses Ziel zu erreichen.

In der modernen UI-Entwicklung hat sich gezeigt, dass es sinnvoller ist, den Code in lose gekoppelte Komponenten zu unterteilen und diese zusammenzusetzen, anstatt ihn in drei große, miteinander verwobene Schichten zu unterteilen. Innerhalb einer Komponente sind Template, Logik und Stile naturgemäß miteinander verbunden, und ihre räumliche Nähe macht die Komponente kohärenter und wartungsfreundlicher.

Beachten Sie, dass Sie auch dann, wenn Ihnen das Konzept der Single-File Components nicht gefällt, deren Hot-Reloading- und Vorkompilierungsfunktionen nutzen können, indem Sie Ihr JavaScript und CSS mithilfe von Src Imports in separate Dateien aufteilen.

Die Seite auf GitHub editieren