merged readme
This commit is contained in:
parent
7017df5fa3
commit
cb52732b00
4 changed files with 256 additions and 726 deletions
|
|
@ -1,170 +0,0 @@
|
|||
# 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.
|
||||
Loading…
Add table
Add a link
Reference in a new issue