vue dash

VueDash (Vue Nuxt.js 3 Tailwind CSS Admin Dashboard-Vorlage)

Eine moderne, reaktionsfähige und anpassbare Admin-Dashboard-Vorlage, die mit Vue.js , Nuxt.js 3 , NuxtUI und Tailwind CSS erstellt wurde. Diese Vorlage eignet sich perfekt zum Erstellen leistungsstarker Admin-Schnittstellen, Dashboards und Webanwendungen mit einem klaren und minimalistischen Design.

Merkmale

• Nuxt.js 3 : Nahtloses serverseitiges Rendering (SSR) und statische Site-Generierung (SSG) mit der Vue 3-Kompositions-API.
• Tailwind CSS : Utility-First-CSS-Framework für schnelle und reaktionsschnelle UI-Entwicklung.
• Todo-Listen-Verwaltung : Integrierte Unterstützung für die CRUD-ToDo-Listen-Verwaltung
• Rechnungsersteller : Integrierte Unterstützung für CRUD, interaktiver Rechnungsersteller
• Wiederverwendbare Komponenten : Modulare und wiederverwendbare UI-Komponenten für eine einfache Anpassung.
• Dunkler Modus : Integrierte Unterstützung für helle und dunkle Themen.
• Responsive Design : Vollständig optimiert für alle Bildschirmgrößen.
• Dynamisches Routing : Flexibles Routing-System basierend auf Nuxt.js.
• Erweiterbar : Einfaches Hinzufügen neuer Seiten, Komponenten und Plugins.

? Tech-Stack

• Frontend-Framework : Vue.js 3 (Composition API)
• Meta-Framework : Nuxt.js 3
• Styling : Rückenwind-CSS
• UI-Komponentenbibliothek : NextUI
• Paketmanager : pnpm

Installation

1. Klonen Sie das Repository :

   git clone https://github.com/Kei-K23/vue-dash
   cd vue-dash

2. Abhängigkeiten installieren :

   pnpm install
   # or
   npm install

3. Führen Sie den Entwicklungsserver aus :

   pnpm run dev
   # or
   npm run dev

4. Öffnen Sie Ihren Browser und navigieren Sie zu http://localhost:3000 .

---

Dateistruktur

 admin-dashboard-template/
├── layouts/           # Layouts for the app
├── pages/             # Nuxt.js pages and routes
├── features/          # Organize logic, ui components and state into domain or feature
├── public/            # Static assets
├── nuxt.config.ts     # Nuxt.js configuration
└── tailwind.config.js # Tailwind CSS configuration

? Routen- und Seitendokumentation

Route	Seitenname	Beschreibung
/	Hauptseite	Die primäre Zielseite des Admin-Dashboards.
/login	Anmeldeseite	Ermöglicht Benutzern die Anmeldung, um auf das Admin-Dashboard zuzugreifen.
/register	Registrierungsseite	Ermöglicht neuen Benutzern die Erstellung eines Kontos.
/contact	Kontaktseite	Zeigt ein Formular an, über das Benutzer Support oder Anfragen anfordern können.
/invoice	Rechnungsseite	Zeigt eine Liste von Rechnungen oder Details zu Finanzunterlagen an.
/todo	Todo-App-Seite	Eine Seite zum Verwalten und Verfolgen von Aufgaben im ToDo-Listenformat.
/products	Produktseite	Eine Seite zum Verwalten von Produktinformationen, einschließlich Details und Preisen.
/order-lists	Seite „Bestelllisten“.	Listet alle Kundenbestellungen mit Optionen zum Anzeigen und Verwalten dieser auf.
/product-stock	Produktbestandsseite	Zeigt aktuelle Lagerbestände und Optionen zur Bestandsverwaltung an.
/settings	Einstellungsseite	Ermöglicht Benutzern die Verwaltung von Systemeinstellungen und persönlichen Präferenzen.
/team	Teamseite	Präsentiert Teammitglieder, Rollen und Berechtigungsverwaltungsoptionen.

? Anpassung

Rückenwind-CSS

Ändern Sie die Datei tailwind.config.js , um Designs anzupassen, Stile zu erweitern oder Plugins hinzuzufügen.

Komponenten

Alle Komponenten befinden sich im Verzeichnis components/ “ im Verzeichnis features/(domain)/ “. Erstellen Sie neue Komponenten oder erweitern Sie bestehende entsprechend Ihren Projektanforderungen.

Seiten und Routing

Fügen Sie Dateien im Verzeichnis pages/ “ hinzu oder bearbeiten Sie sie, um dynamisch neue Routen zu erstellen.

? Abhängigkeiten

• Vue 3
• Nuxt.js 3
• Rückenwind-CSS
• NuxtUI

Dokumentation

Authentifizierung einrichten

Sie können jeden Authentifizierungsdienst (z. B. Firebase, Auth0 oder benutzerdefiniertes JWT) mithilfe der Middleware und Plugins von Nuxt integrieren. Weitere Informationen finden Sie im Nuxt.js-Authentifizierungsmodul.

API-Integrationen hinzufügen

Verwenden Sie die Serverrouten von Nuxt oder externe API-Aufrufe in den Verzeichnissen pages/ oder composables/ . Erfahren Sie hier mehr über die Handhabung der Nuxt.js-API.

? Testen

Unit-Tests

Installieren und konfigurieren Sie Vitest für Unit-Tests Ihrer Vue-Komponenten.

End-to-End-Tests

Verwenden Sie Cypress oder Playwright für End-to-End-Tests.

Einsatz

1. Statische Site-Generierung (SSG) :

   pnpm run generate

   Stellen Sie die generierten Dateien aus dem Ordner dist/ bei einem statischen Hosting-Anbieter bereit (z. B. Netlify, Vercel).

2. Serverseitiges Rendering (SSR) :

   pnpm run build
   pnpm run start

   Stellen Sie die Anwendung auf dem Node.js-Hosting bereit (z. B. AWS, Heroku oder DigitalOcean).

? Unterstützung

Wenn Sie auf Probleme stoßen, Fragen haben oder neue Funktionen oder Seiten anfordern möchten, können Sie gerne ein Problem eröffnen oder sich an [email protected] wenden.

? Beiträge

Beiträge sind willkommen! Bitte folgen Sie diesen Schritten:

1. Forken Sie das Repository.
2. Erstellen Sie einen Feature-Zweig ( git checkout -b feature-name ).
3. Übernehmen Sie Ihre Änderungen ( git commit -m "Add feature" ).
4. Zum Zweig pushen ( git push origin feature-name ).
5. Öffnen Sie eine Pull-Anfrage.

Lizenz

Dieses Projekt ist unter der MIT-Lizenz lizenziert.

? Danksagungen

• Vue.js
• Nuxt.js
• NuxtUI
• Rückenwind-CSS

Seitenvorschau

Desktop-Ansicht

Tablet-Ansicht

Mobile Ansicht