170 lines
4.5 KiB
Markdown
170 lines
4.5 KiB
Markdown
# TschunkOrder Frontend
|
|
|
|
Das Frontend für die TschunkOrder-Anwendung - eine Vue.js-basierte Webanwendung zur Verwaltung von Getränkebestellungen.
|
|
|
|
## 📋 Übersicht
|
|
|
|
Das Frontend ist eine moderne Single-Page-Application (SPA), die mit Vue 3, TypeScript und Vite entwickelt wurde. Es bietet eine benutzerfreundliche Oberfläche für:
|
|
|
|
- **Bestellungen anzeigen**: Übersicht über alle bestehenden Bestellungen
|
|
- **Neue Bestellungen erstellen**: Formular zum Erstellen neuer Getränkebestellungen
|
|
- **Bestellungen verwalten**: Bearbeiten und Löschen von Bestellungen
|
|
|
|
## 🛠️ Technologie-Stack
|
|
|
|
- **Vue 3** - Progressive JavaScript Framework
|
|
- **TypeScript** - Typsichere JavaScript-Entwicklung
|
|
- **Vite** - Schneller Build-Tool und Development Server
|
|
- **Vue Router** - Client-seitiges Routing
|
|
- **Pinia** - State Management für Vue
|
|
- **ESLint** - Code-Qualität und Konsistenz
|
|
|
|
## 📦 Installation
|
|
|
|
### Voraussetzungen
|
|
|
|
- Node.js (Version 18 oder höher)
|
|
- npm (wird mit Node.js installiert)
|
|
|
|
### Projekt einrichten
|
|
|
|
1. **Repository klonen** (falls noch nicht geschehen):
|
|
```bash
|
|
git clone <repository-url>
|
|
cd tschunkorder/frontend
|
|
```
|
|
|
|
2. **Abhängigkeiten installieren**:
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
## 🚀 Entwicklung
|
|
|
|
### Development Server starten
|
|
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
Der Development Server startet standardmäßig auf `http://localhost:5173`. Die Anwendung unterstützt Hot-Reload, sodass Änderungen automatisch im Browser aktualisiert werden.
|
|
|
|
### Code-Qualität
|
|
|
|
**Linting ausführen**:
|
|
```bash
|
|
npm run lint
|
|
```
|
|
|
|
**TypeScript-Typen prüfen**:
|
|
```bash
|
|
npm run type-check
|
|
```
|
|
|
|
## 🏗️ Build und Deployment
|
|
|
|
### Produktions-Build erstellen
|
|
|
|
```bash
|
|
npm run build
|
|
```
|
|
|
|
Der Build-Prozess erstellt optimierte Dateien im `dist/`-Verzeichnis.
|
|
|
|
### Build-Vorschau
|
|
|
|
```bash
|
|
npm run preview
|
|
```
|
|
|
|
Zeigt eine lokale Vorschau des Produktions-Builds an.
|
|
|
|
## 📁 Projektstruktur
|
|
|
|
```
|
|
frontend/
|
|
├── src/
|
|
│ ├── assets/ # Statische Assets (Bilder, Styles, etc.)
|
|
│ ├── components/ # Wiederverwendbare Vue-Komponenten
|
|
│ │ ├── icons/ # Icon-Komponenten
|
|
│ │ ├── OrderCard.vue
|
|
│ │ └── NewDrinkCard.vue
|
|
│ ├── router/ # Vue Router Konfiguration
|
|
│ ├── stores/ # Pinia State Management
|
|
│ ├── types/ # TypeScript Typdefinitionen
|
|
│ ├── views/ # Seiten-Komponenten
|
|
│ │ ├── CreateOrderView.vue
|
|
│ │ └── OrdersView.vue
|
|
│ ├── App.vue # Haupt-App-Komponente
|
|
│ └── main.ts # Anwendungs-Einstiegspunkt
|
|
├── public/ # Öffentliche statische Dateien
|
|
├── package.json # Projekt-Abhängigkeiten und Scripts
|
|
├── vite.config.ts # Vite-Konfiguration
|
|
├── tsconfig.json # TypeScript-Konfiguration
|
|
└── eslint.config.ts # ESLint-Konfiguration
|
|
```
|
|
|
|
## 🎨 Komponenten
|
|
|
|
### Views (Seiten)
|
|
|
|
- **OrdersView.vue**: Zeigt eine Übersicht aller Bestellungen an
|
|
- **CreateOrderView.vue**: Formular zum Erstellen neuer Bestellungen
|
|
|
|
### Komponenten
|
|
|
|
- **OrderCard.vue**: Karten-Komponente zur Darstellung einzelner Bestellungen
|
|
- **NewDrinkCard.vue**: Komponente zum Hinzufügen neuer Getränke zur Bestellung
|
|
|
|
## 🔧 Konfiguration
|
|
|
|
### Vite-Konfiguration
|
|
|
|
Die Vite-Konfiguration befindet sich in `vite.config.ts` und enthält:
|
|
- Vue-Plugin-Konfiguration
|
|
- Development-Tools-Integration
|
|
- Build-Optimierungen
|
|
|
|
### TypeScript-Konfiguration
|
|
|
|
- `tsconfig.json`: Hauptkonfiguration
|
|
- `tsconfig.app.json`: App-spezifische Einstellungen
|
|
- `tsconfig.node.json`: Node.js-Umgebung
|
|
|
|
## 🐛 Troubleshooting
|
|
|
|
### Häufige Probleme
|
|
|
|
1. **Port bereits belegt**:
|
|
- Vite versucht automatisch den nächsten verfügbaren Port
|
|
- Oder manuell in `vite.config.ts` ändern
|
|
|
|
2. **TypeScript-Fehler**:
|
|
```bash
|
|
npm run type-check
|
|
```
|
|
|
|
3. **Linting-Fehler**:
|
|
```bash
|
|
npm run lint
|
|
```
|
|
|
|
## 📚 Nützliche Links
|
|
|
|
- [Vue 3 Dokumentation](https://vuejs.org/)
|
|
- [Vite Dokumentation](https://vitejs.dev/)
|
|
- [Vue Router Dokumentation](https://router.vuejs.org/)
|
|
- [Pinia Dokumentation](https://pinia.vuejs.org/)
|
|
- [TypeScript Dokumentation](https://www.typescriptlang.org/)
|
|
|
|
## 🤝 Beitragen
|
|
|
|
1. Fork des Repositories erstellen
|
|
2. Feature-Branch erstellen (`git checkout -b feature/AmazingFeature`)
|
|
3. Änderungen committen (`git commit -m 'Add some AmazingFeature'`)
|
|
4. Branch pushen (`git push origin feature/AmazingFeature`)
|
|
5. Pull Request erstellen
|
|
|
|
## 📄 Lizenz
|
|
|
|
Dieses Projekt ist Teil der TschunkOrder-Anwendung.
|