Veröffentlicht · wird verbessert
Framework · Seit 2014
Vue.js ist ein progressives JavaScript-Framework für deklarative UI-Komponenten; Nuxt ergänzt Routing, Server-Rendering und Server-APIs.
Vue.js ist ein quelloffenes JavaScript-Framework für Benutzeroberflächen, das von Evan You entwickelt und 2014 erstmals veröffentlicht wurde. Es verbindet HTML-basierte Templates mit reaktivem Zustand, sodass sich die Seite bei Datenänderungen automatisch aktualisiert. Grundbaustein ist die Single-File-Component (.vue), die Template, Skript und Stil in einer Datei bündelt. Nuxt ist ein Full-Stack-Framework auf Basis von Vue und bringt dateibasiertes Routing, Auto-Imports, Server-Side-Rendering und Server-APIs auf Grundlage der Nitro-Engine mit.
Vue lässt sich schrittweise einführen: vom einzelnen Script-Tag, der einen Teil einer bestehenden Seite interaktiv macht, bis zur vollständigen Single-Page-Application mit Vite. Besonders gut passt es zu interaktiven Oberflächen wie Admin-Bereichen, Dashboards und internen Werkzeugen. Wenn Suchmaschinen-Sichtbarkeit und schnelle erste Ladezeit wichtig sind oder Seiten und APIs in einem Projekt liegen sollen, bietet Nuxt Server-Rendering, statische Generierung und Server-Routen und lässt sich auf Node.js-Server, statisches Hosting und viele weitere Ziele ausrollen.
Für den Einstieg installiert man Node.js und arbeitet das interaktive Tutorial und den Guide auf der offiziellen Website durch, um Reaktivität, Komponenten und Template-Syntax kennenzulernen. Danach legt man mit npm create vue@latest ein Vite-Projekt an und baut eigene Oberflächen; sobald Routing-Konventionen und Server-Rendering gebraucht werden, wechselt man zu Nuxt. Pinia für das State-Management und Vitest für Unit-Tests sind die offiziell empfohlenen Begleiter.
Mit ref, reactive und computed deklarierter Zustand kennt seine Abhängigen, sodass bei Änderungen nur die betroffenen Teile der Seite neu gerendert werden.
Template, Skript und Stil stehen in einer .vue-Datei, mit gekapselten Styles und TypeScript-Unterstützung ohne Zusatzaufwand.
Zusammengehörige Logik wird in Funktionen gebündelt und als Composables wiederverwendet, was auch große Komponenten übersichtlich hält.
Dateibasiertes Routing, Auto-Imports, Server-Rendering, statische Generierung und API-Routen im server-Ordner funktionieren ohne zusätzliche Konfiguration.
Die Werkzeuge von Vue und Nuxt laufen auf Node.js. Installiere die LTS-Version von nodejs.org und prüfe, ob node und npm ihre Versionen anzeigen.
node --version && npm --versionDas offizielle Gerüst-Werkzeug create-vue fragt, ob TypeScript, Vue Router, Pinia, Vitest und mehr eingerichtet werden sollen. Im neuen Ordner startet npm install und danach npm run dev den Vite-Entwicklungsserver.
npm create vue@latestFür Nuxt erzeugst du ein Projekt mit nuxi. Wechsle in den neuen Ordner und führe npm run dev aus; der Entwicklungsserver läuft standardmäßig unter http://localhost:3000.
npx nuxi@latest init my-nuxt-appsrc/App.vue ist die Wurzelkomponente eines create-vue-Projekts. Der script-setup-Block legt mit ref(0) einen reaktiven Zähler count an; das Template zeigt ihn mit doppelten geschweiften Klammern und erhöht ihn über @click bei jedem Klick. Ändert sich count, rendert Vue nur das neu, was davon abhängt. Läuft npm run dev, erscheint jede gespeicherte Änderung sofort im Browser.
src/App.vue
<script setup lang="ts">
import { ref } from "vue";
const count = ref(0);
</script>
<template>
<h1>Hello, Vue!</h1>
<button @click="count++">Clicked {{ count }} times</button>
</template>
npm create vue@latest hello-vue && cd hello-vue && npm install && npm run devSechs Kapitel führen dich von der Installation bis zu den Kernkonzepten von Vue.js · Nuxt.
Stelle Fragen, teile Erfahrungen und tausche Meinungen zu Vue.js · Nuxt aus.
Noch keine Diskussionen. Starte die erste.
0 Kommentare
Anmelden · Melde dich an, um einen Kommentar zu schreiben.
Schreib den ersten Kommentar.