JSX in Vue 3 mit Vite
@vitejs/plugin-vue-jsx, JSX-Pragma, funktionale Komponenten und Abwägungen zwischen JSX und Templates
JSX in Vue 3 mit Vite ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.
JSX in Vue 3
Mit JSX können Sie eine markupähnliche Syntax innerhalb von JavaScript schreiben, die zu h-Aufrufen kompiliert wird. Vue 3 unterstützt JSX über ein spezielles Babel-Plugin, das in Vite eingebunden wird.
Das Plugin installieren
Das offizielle Paket ist @vitejs/plugin-vue-jsx. Installieren Sie es zusammen mit dem regulären Vue-Plugin als Entwicklungsabhängigkeit.
npm install -D @vitejs/plugin-vue-jsxvite.config.ts konfigurieren
Fügen Sie vueJsx() zum Array plugins in vite.config.ts hinzu. Der Eintrag ist erforderlich, damit Vite JSX-Dateien transformiert.
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";
export default defineConfig({
plugins: [vue(), vueJsx()]
});Die Dateiendung .tsx
Komponenten, die in JSX geschrieben sind, verwenden die Endung .tsx (oder .jsx). Das Plugin verarbeitet nur Dateien mit diesen Endungen.
// Greeting.tsx
export default () => <div>Hello</div>;Eine funktionale Komponente
Die einfachste Komponente ist eine Arrow-Funktion, die ein JSX-Element zurückgibt. Klasse und Text erscheinen genau wie in HTML.
const Comp = () => <div class="box">text</div>;
export default Comp;class, nicht className
Anders als React verwendet Vue JSX class statt className. Dasselbe gilt für for bei Labels.
const Card = () => (
<div class="card">
<label for="name">Name</label>
</div>
);Dynamische Werte
Binden Sie Ausdrücke in geschweiften Klammern ein. Reaktive Refs werden innerhalb des Render-Bodys mit .value gelesen.
import { ref } from "vue";
export default () => {
const count = ref(0);
return () => <span>Count: {count.value}</span>;
};Event-Handler in camelCase
Listener verwenden das Präfix on in camelCase: onClick, onInput, onMouseenter. Der Handler ist eine Funktion.
const Button = () => (
<button onClick={() => alert("hi")}>
Click
</button>
);Bedingtes Rendern
JSX bietet kein v-if. Verwenden Sie Ternary-Ausdrücke oder logische Ausdrücke, um Elemente bedingt zu erzeugen.
const View = (props) => (
<div>
{props.loading ? <p>Loading...</p> : <p>Done</p>}
</div>
);Listen rendern
Ersetzen Sie v-for durch map. Geben Sie wie in Templates für jedes Element einen key an.
const List = (props) => (
<ul>
{props.items.map((item) => (
<li key={item.id}>{item.text}</li>
))}
</ul>
);defineComponent für Props verwenden
Für typisierte Props und den Lebenszyklus kapseln Sie Ihre Logik in defineComponent. Die Setup-Funktion gibt eine Render-Funktion zurück, die JSX zurückgibt.
import { defineComponent } from "vue";
export default defineComponent({
props: { title: String },
setup(props) {
return () => <h1>{props.title}</h1>;
}
});Kurztest
Welches Plugin aktiviert JSX in einem Vue-3-Vite-Projekt, und wo wird es eingetragen?
Zusammenfassung
Vue-3-JSX wird aktiviert, indem Sie vueJsx() aus @vitejs/plugin-vue-jsx zum Vite-Plugins-Array hinzufügen und Komponenten in .tsx-Dateien schreiben. Verwenden Sie class statt className, camelCase-Handler wie onClick und defineComponent, wenn Sie typisierte Props benötigen.
Lerne HTML mit einem KI-Tutor — kostenlos
Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.
- Kurse
- 42
- Lektionen
- 156
Häufig gestellte Fragen
Ist die Lektion „JSX in Vue 3 mit Vite“ kostenlos?
Ja — der vollständige Text von „JSX in Vue 3 mit Vite“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Vue Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „JSX in Vue 3 mit Vite“?
@vitejs/plugin-vue-jsx, JSX-Pragma, funktionale Komponenten und Abwägungen zwischen JSX und Templates Du übst Vue Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Vue Academy zu starten?
Keine Vorkenntnisse erforderlich. Vue Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.
Wie lange dauert die Lektion „JSX in Vue 3 mit Vite“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Vue Academy-Lektion Code schreiben und ausführen?
Ja. Jede Vue Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Die Funktion h() im Detail
- JSX in Vue 3 mit Vite
- Dynamische Komponenten mit render-Funktionen
- Muster der Higher-Order Components (HOC)