admin dashboard starter

أسهل مجموعة لوحة القيادة في المجرة!

هدفنا هو تبسيط تطوير السبا - شحن لوحة معلومات المشرف اليوم. ينصب التركيز على نمط المكدس/الهندسة/التصميم ، وليس على جماليات. يتم الاحتفاظ بالتصميم الحد الأدنى من أجل الحفاظ على هذا الأمر بسيطًا ، ويسهل تنفيذ التصميم الخاص بك.

نحن نغطي جزء التصميم أيضًا - نقل أطر المشرف الرئيسية إلى Tech Starter Tech. فيما يلي قائمة كاملة (كلما زاد عدد النجوم ، زاد العمل الذي قمنا به):

• تابلر
• adminlte
• الإدارة
• لوحة القيادة المادية

بنيت مع سفلت و sapper. Rollup يبني المشروع. انتشر مع Firebase Hosting ، الآن ، زيادة أو مباشرة إلى خوادمك.

الكل في الكل ، يمكنك نشر لوحة معلومات المشرف الحية اليوم.

سمات

• من السهل استخدام نظام المكون. المكونات عادية HTML ، CSS ، JS.
• التوجيه القائم على المجلد.
• نظام مصادقة قوي. قم بتوصيل Firebase أو Passport.js أو Auth0 بسهولة.
• الاختبار والتطوير القائم على المكونات. تقديم مكونات واحدة - العمل وتكرار أسرع. تم إعداد نظام اختبار/اختبار مكون قوي للوحدة.
• مصادر البيانات. قم بتوصيل البيانات الخاصة بك بسهولة - من قاعدة بيانات أو ملف أو خادم عن بعد.
• اختبارات التكامل مع السرو.
• التبديل بين بيئات Dev و Prod من سطر الأوامر.
• نشر من سطر الأوامر إلى الخدمات الشعبية.

تشغيل المشروع

ومع ذلك ، يمكنك الحصول على الرمز ، يمكنك تثبيت التبعيات وتشغيل المشروع في وضع التطوير مع:

 cd admin-dashboard-starter
npm install # or yarn
npm run dev

افتح المضيف المحلي: 3000 وابدأ في النقر.

استشر sapper.svelte.dev للمساعدة في البدء.

بناء

يتوقع Sapper العثور على دليلين في جذر مشروعك - src و static .

SRC

يحتوي دليل SRC على نقاط الإدخال لتطبيقك- client.js و server.js و (اختياريًا) A service-worker.js جنبًا إلى جنب مع ملف template.html ودليل routes .

SRC/الطرق

هذا هو قلب تطبيق Sapper الخاص بك. هناك نوعان من الطرق - الصفحات وطرق الخادم .

الصفحات هي مكونات svelte مكتوبة في ملفات .svelte . عندما يقوم المستخدم بزيارة التطبيق لأول مرة ، سيتم تقديم إصدار يتم تقديمه للخادم من المسار المعني ، بالإضافة إلى بعض JavaScript التي "ترطيب" الصفحة وتهيئة جهاز توجيه من جانب العميل. من تلك النقطة إلى الأمام ، يتم التعامل مع التنقل إلى صفحات أخرى بالكامل على العميل للحصول على شعور سريع يشبه التطبيق. (سوف يقوم SAPPER بتحميل وتخزين الكود لهذه الصفحات اللاحقة ، بحيث يكون التنقل فوريًا.)

طرق الخادم هي وحدات مكتوبة في ملفات .js ، أن وظائف التصدير المقابلة لطرق HTTP. تتلقى كل وظيفة كائنات request صريحة وكائنات response كوسائط ، بالإضافة إلى وظيفة next . هذا مفيد لإنشاء API JSON ، على سبيل المثال.

هناك ثلاث قواعد بسيطة لتسمية الملفات التي تحدد طرقك:

• ملف يسمى src/routes/about.svelte يتوافق مع /about المسار. ملف يسمى src/routes/blog/[slug].svelte يتوافق مع /blog/:slug Route ، وفي هذه الحالة يكون params.slug متاحًا للمسار
• يتوافق الملف src/routes/index.svelte (أو src/routes/index.js ) مع جذر التطبيق الخاص بك. يتم التعامل مع src/routes/about/index.svelte مثل src/routes/about.svelte .
• لا تنشئ الملفات والأدلة ذات السطح السفلي الرائد طرقًا. يتيح لك ذلك توضيح وحدات ومكونات المساعد مع الطرق التي تعتمد عليها - على سبيل المثال ، يمكن أن يكون لديك ملف يسمى src/routes/_helpers/datetime.js ولن ينشئ A /_helpers/datetime

ثابت

يحتوي الدليل الثابت على أي أصول ثابتة يجب أن تكون متاحة. يتم تقديم هذه باستخدام sirv.

في ملف Service-Worker.js الخاص بك ، يمكنك استيراد هذه files من البيان الذي تم إنشاؤه ...

 import { files } from '@sapper/service-worker' ;

... بحيث يمكنك تخزينها (على الرغم من أنه يمكنك اختيار عدم ذلك ، على سبيل المثال إذا كنت لا تريد ذاكرة التخزين المؤقت للملفات الكبيرة جدًا).

تهيئة bundler

يستخدم Sapper Rollup أو WebPack لتوفير واردات تقسيم التعليمات البرمجية والديناميكية ، بالإضافة إلى تجميع مكونات Svelte الخاصة بك. مع WebPack ، فإنه يوفر أيضًا إعادة تحميل الوحدة النمطية الساخنة. طالما أنك لا تفعل أي شيء ، يمكنك تحرير ملفات التكوين لإضافة أي مكونات إضافية تريدها.

وضع الإنتاج والنشر

لبدء إصدار إنتاج من تطبيقك ، قم بتشغيل npm run build && npm start . سيؤدي ذلك إلى تعطيل إعادة التحميل المباشر ، وتنشيط المكونات الإضافية المناسبة.

يمكنك نشر التطبيق الخاص بك على أي بيئة تدعم العقدة 8 أو أعلى. على سبيل المثال ، للنشر الآن ، قم بتشغيل هذه الأوامر:

npm install -g now
now

باستخدام المكونات الخارجية

عند استخدام مكونات Svelte المثبتة من NPM ، مثل @sveltejs/svelte-virtual-list ، يحتاج Svelte إلى مصدر المكون الأصلي (بدلاً من أي JavaScript مسبقًا يشحن مع المكون). يتيح ذلك تقديم المكون إلى جانب الخادم ، كما يبقي تطبيقك من جانب العميل أصغر.

ولهذا السبب ، من الضروري ألا يعامل الحزمة الحزمة كاعتماد خارجي . يمكنك إما تعديل الخيار external ضمن server في rollup.config.js أو خيار externals في webpack.config.js ، أو ببساطة تثبيت الحزمة على devDependencies بدلاً من dependencies ، مما سيؤدي إلى تجميعه (وبالتالي مجمعه) مع تطبيقك:

npm install -D @sveltejs/svelte-virtual-list

الأخطاء والتعليقات

يرجى أن تكون صوتيًا على متتبع إصدار DBH.