Kapitel 6: Vue 3 Projekt erstellen

📗 Lernziel: Vue 3 Projekte mit create-vue und Vite erstellen!

6.1 Vue 3 Projekt mit `create-vue` erstellen

create-vue ist das offizielle Scaffolding-Tool für Vue 3.

Schritt 1: Projekt erstellen

bash

# Mit npm
npm create vue@latest

# Mit pnpm
pnpm create vue@latest

Schritt 2: Fragen beantworten

✔ Projektname: … mein-vue-projekt
✔ TypeScript hinzufügen? … No / Yes
✔ JSX Support? … No / Yes
✔ Vue Router hinzufügen? … No / Yes
✔ Pinia für State Management hinzufügen? … No / Yes
✔ Vitest für Unit Testing hinzufügen? … No / Yes
✔ ESLint konfigurieren? … No / Yes
✔ Prettier konfigurieren? … No / Yes

Schritt 3: Abhängigkeiten installieren und starten

bash

cd mein-vue-projekt
pnpm install
pnpm run dev

Ergebnis: Ein vollständiges Vue 3 Projekt mit gewünschten Features!

6.2 Vue 3 Projekt mit Vite erstellen (Empfohlen)

Vite ist der moderne Build-Tool für Vue 3 (schneller!).

Schritt 1: Projekt erstellen

bash

# Mit npm
npm create vite@latest

# Mit pnpm
pnpm create vite@latest

Schritt 2: Konfiguration wählen

✔ Projektname: … mein-vue-projekt
✔ Framework wählen: › Vue
✔ Variant wählen: › JavaScript / TypeScript

Schritt 3: Abhängigkeiten installieren und starten

bash

cd mein-vue-projekt
pnpm install
pnpm run dev

Vorteile von Vite:

⚡ Extrem schneller HMR (Hot Module Replacement)
📦 Schnellere Build-Zeiten
🔧 Einfache Konfiguration

6.3 Projekt-Verzeichnisstruktur erklärt

Wichtige Dateien und Ordner:

mein-vue-projekt/
├── node_modules/       # Installierte Pakete
├── public/            # Statische Assets
│   └── favicon.ico
├── src/               # Quellcode (HIER ARBEITEST DU!)
│   ├── assets/        # Bilder, CSS, etc.
│   ├── components/    # Vue Komponenten
│   ├── App.vue        # Hauptkomponente
│   └── main.js        # Einstiegspunkt
├── .gitignore         # Git Ignorieren-Liste
├── index.html         # HTML-Einstiegspunkt
├── package.json       # Projekt-Konfiguration
├── vite.config.js    # Vite Konfiguration
└── README.md          # Dokumentation

Wichtigste Dateien:

`index.html`

html

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Mein Vue Projekt</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

`src/main.js`

javascript

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

`src/App.vue`

vue

<script setup>
// Logik hier
</script>

<template>
  <h1>Hello Vue 3!</h1>
</template>

<style scoped>
h1 {
  color: #42b883;
}
</style>

6.4 Projekt ausführen und bauen

Wichtige Befehle:

Entwicklungsserver starten

bash

pnpm run dev
# Öffnet http://localhost:5173

Produktions-Build erstellen

bash

pnpm run build
# Erstellt `dist/` Ordner

Build lokal testen

bash

pnpm run preview
# Testet den Produktions-Build lokal

package.json Skripte:

json

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

✅ Zusammenfassung

In diesem Kapitel hast du gelernt:

✅ Vue 3 Projekt mit create-vue erstellen
✅ Vue 3 Projekt mit Vite erstellen (empfohlen)
✅ Verzeichnisstruktur verstehen
✅ Projekt ausführen und bauen

🎯 Nächster Schritt: In Kapitel 7 lernst du die Vue 3 Kern-Grundlagen!

← Zurück zu Kapitel 5: Erstes Vue 3 ProgrammWeiter zu Kapitel 7: Vue 3 Grundlagen →

Kapitel 6: Vue 3 Projekt erstellen ​

6.1 Vue 3 Projekt mit create-vue erstellen ​

6.2 Vue 3 Projekt mit Vite erstellen (Empfohlen) ​

6.3 Projekt-Verzeichnisstruktur erklärt ​

index.html ​

src/main.js ​

src/App.vue ​

6.4 Projekt ausführen und bauen ​

Entwicklungsserver starten ​

Produktions-Build erstellen ​

Build lokal testen ​

✅ Zusammenfassung ​

Kapitel 6: Vue 3 Projekt erstellen

6.1 Vue 3 Projekt mit `create-vue` erstellen

6.2 Vue 3 Projekt mit Vite erstellen (Empfohlen)

6.3 Projekt-Verzeichnisstruktur erklärt

`index.html`

`src/main.js`

`src/App.vue`

6.4 Projekt ausführen und bauen

Entwicklungsserver starten

Produktions-Build erstellen

Build lokal testen

✅ Zusammenfassung