vue dash

VueDash (قالب لوحة تحكم مسؤول Vue Nuxt.js 3 Tailwind CSS)

قالب لوحة تحكم إداري حديث وسريع الاستجابة وقابل للتخصيص تم تصميمه باستخدام Vue.js و Nuxt.js 3 و NuxtUI و Tailwind CSS . يعد هذا القالب مثاليًا لإنشاء واجهات إدارية ولوحات معلومات وتطبيقات ويب قوية بتصميم بسيط وبسيط.

سمات

• Nuxt.js 3 : عرض سلس من جانب الخادم (SSR) وإنشاء موقع ثابت (SSG) باستخدام واجهة برمجة تطبيقات تكوين Vue 3.
• Tailwind CSS : إطار عمل CSS للأداة المساعدة لتطوير واجهة مستخدم سريعة وسريعة الاستجابة.
• إدارة قوائم المهام : دعم مدمج لإدارة قائمة المهام CRUD
• صانع الفاتورة : دعم مدمج لـ CRUD، صانع الفاتورة التفاعلي
• المكونات القابلة لإعادة الاستخدام : مكونات واجهة المستخدم المعيارية والقابلة لإعادة الاستخدام لسهولة التخصيص.
• الوضع الداكن : دعم مدمج للموضوعات الفاتحة والداكنة.
• تصميم سريع الاستجابة : مُحسّن بالكامل لجميع أحجام الشاشات.
• التوجيه الديناميكي : نظام توجيه مرن مدعوم من Nuxt.js.
• قابل للتمديد : من السهل إضافة صفحات ومكونات ومكونات إضافية جديدة.

؟ مكدس التكنولوجيا

• إطار عمل الواجهة الأمامية : Vue.js 3 (واجهة برمجة تطبيقات التركيب)
• إطار التعريف : Nuxt.js 3
• التصميم : Tailwind CSS
• مكتبة مكونات واجهة المستخدم : NextUI
• مدير الحزم : pnpm

تثبيت

1. استنساخ المستودع :

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

2. تثبيت التبعيات :

   pnpm install
   # or
   npm install

3. تشغيل خادم التطوير :

   pnpm run dev
   # or
   npm run dev

4. افتح المتصفح وانتقل إلى http://localhost:3000 .

---

هيكل الملف

 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

؟ توثيق الطرق والصفحات

طريق	اسم الصفحة	وصف
/	الصفحة الرئيسية	الصفحة المقصودة الأساسية للوحة تحكم المشرف.
/login	صفحة تسجيل الدخول	يسمح للمستخدمين بتسجيل الدخول للوصول إلى لوحة تحكم المشرف.
/register	صفحة التسجيل	تمكن المستخدمين الجدد من إنشاء حساب.
/contact	صفحة الاتصال	يعرض نموذجًا للمستخدمين للتواصل للحصول على الدعم أو الاستفسارات.
/invoice	صفحة الفاتورة	يعرض قائمة الفواتير أو تفاصيل السجلات المالية.
/todo	صفحة تطبيق تودو	صفحة لإدارة وتتبع المهام بتنسيق قائمة المهام.
/products	صفحة المنتجات	صفحة لإدارة معلومات المنتج بما في ذلك التفاصيل والأسعار.
/order-lists	صفحة قوائم الطلبات	يسرد جميع طلبات العملاء مع خيارات لعرضها وإدارتها.
/product-stock	صفحة مخزون المنتج	يعرض مستويات المخزون الحالية وخيارات إدارة المخزون.
/settings	صفحة الإعدادات	يسمح للمستخدمين بإدارة إعدادات النظام والتفضيلات الشخصية.
/team	صفحة الفريق	يعرض أعضاء الفريق والأدوار وخيارات إدارة الأذونات.

؟ التخصيص

الريح الخلفية CSS

قم بتعديل ملف tailwind.config.js لتخصيص السمات أو توسيع الأنماط أو إضافة مكونات إضافية.

عناصر

جميع المكونات موجودة في دليل components/ داخل دليل features/(domain)/ . قم بإنشاء مكونات جديدة أو قم بتوسيع المكونات الموجودة لتناسب احتياجات مشروعك.

الصفحات والتوجيه

قم بإضافة أو تحرير الملفات في دليل pages/ لإنشاء مسارات جديدة ديناميكيًا.

؟ التبعيات

• النظرة 3
• نوكست.جي إس 3
• الريح الخلفية CSS
• NuxtUI

التوثيق

إعداد المصادقة

يمكنك دمج أي خدمة مصادقة (على سبيل المثال، Firebase، أو Auth0، أو JWT المخصص) باستخدام البرامج الوسيطة والمكونات الإضافية الخاصة بـ Nuxt. راجع وحدة المصادقة Nuxt.js لمزيد من التفاصيل.

إضافة تكاملات API

استخدم مسارات خادم Nuxt أو استدعاءات واجهة برمجة التطبيقات الخارجية في pages/ أو composables/ الدلائل. تعرف على المزيد حول التعامل مع Nuxt.js API هنا.

؟ اختبار

اختبار الوحدة

قم بتثبيت Vitest وتكوينه لوحدة اختبار مكونات Vue الخاصة بك.

اختبار شامل

استخدم Cypress أو Playwright للاختبار الشامل.

النشر

1. إنشاء الموقع الثابت (SSG) :

   pnpm run generate

   انشر الملفات التي تم إنشاؤها من المجلد dist/ إلى موفر استضافة ثابت (على سبيل المثال، Netlify، Vercel).

2. العرض من جانب الخادم (SSR) :

   pnpm run build
   pnpm run start

   انشر التطبيق على استضافة Node.js (على سبيل المثال، AWS أو Heroku أو DigitalOcean).

؟ يدعم

إذا واجهت أي مشكلات، أو كانت لديك أسئلة، أو كنت ترغب في طلب ميزات أو صفحات جديدة، فلا تتردد في فتح مشكلة أو التواصل مع [email protected].

؟ المساهمات

المساهمات هي موضع ترحيب! يرجى اتباع الخطوات التالية:

1. شوكة المستودع.
2. قم بإنشاء فرع ميزة ( git checkout -b feature-name ).
3. تنفيذ التغييرات ( git commit -m "Add feature" ).
4. ادفع إلى الفرع ( git push origin feature-name ).
5. افتح طلب السحب.

رخصة

هذا المشروع مرخص بموجب ترخيص MIT.

؟ شكر وتقدير

• Vue.js
• Nuxt.js
• NuxtUI
• الريح الخلفية CSS

معاينة الصفحة

عرض سطح المكتب

عرض الكمبيوتر اللوحي

عرض الجوال