elm_vite_tailwind_template

Vite ، Elm ، Tailwind CSS ، و Daisyui

قالب الرأي لبناء تطبيقات الويب ELM باستخدام Vite و Tailwind CSS و Daisyui.

• لمعرفة المزيد عن ELM ، تحقق من الصفحة الرئيسية الرسمية لـ ELM.
• لمزيد من المعلومات حول Vite JS ، تحقق من الوثائق الرسمية لـ Vite JS.
• لمزيد من المعلومات حول CSS Tailwind ، تحقق من الوثائق الرسمية لـ Tailwind CSS.
• لمزيد من المعلومات حول Daisyui ، تحقق من الوثائق الرسمية لـ Daisyui.

الأدوات

فيت

• Vite-Plugin-Elm: تجميع وحدة ELM مع إعادة تحميل الوحدة الساخنة.
• Vite-Plugin-Webfont-DL: حقن خطوط Google لتحسين أداء موقع الويب.
• ضغط Vite-Plugin: ضغط الموارد لتحسين أداء موقع الويب.
• Vite-Plugin-Imagemin: ضغط أصول الصورة لتحسين أداء موقع الويب.

الدردار

• أدوات الدردار: برنامج سطر الأوامر الذي يدير أدوات الدردار الخاصة بك.
• Elm-Format: تنسيق رمز المصدر Elm وفقًا لدليل نمط ELM الرسمي.
• اختبار ELM: وحدة الكتابة واختبارات الزعانف لرمز الدردار.
• Elm-Review: تحليل مشاريع ELM والعثور على أخطاء قبل العثور عليها.

حزم

قائمة مختصرة من حزم الدردار التي يمكن أن تكون مفيدة. المدرجة كاقتراحات:

• HMSK/ELM-Vite-Plugin-helper: يوفر مساعدين لاستخدام Vite-Plugin-Elm.
• Tesk9/Accessable-HTML: يجعل الكتابة على مواقع الويب التي يمكن الوصول إليها أسهل.
• lattyware/elm-fontaweshesh: خط أصلي تكامل ودعم رائع.

لإزالتها لا تتردد:

1. عدم استخدامها
2. تشغيل npm run review

Tailwind CSS

يتم تثبيت المكونات الإضافية الرسمية افتراضيًا:

• @tailwindcss/الطباعة
• @tailwindcss/النماذج
• @tailwindcss/الحاوية
• @Tailwindcss/Ratio

ديزيوي

"مكتبة مكونات CSS الأكثر شعبية ، مجانًا ومفتوحة المصدر" .

Daisyui: مكتبة مكونات CSS CSS Tailwind ، تهدف إلى العمل على جميع الأطر. طبيعة CSS لـ Daisyui تجعل تكامل الدردار ممكنًا ونسيمًا للاستخدام. وشملت الأمثلة:

• الصفحة بأكملها هي قسم بطل Daisyui
• أزرار العداد هي أزرار Daisyui
• Basic Daisyui "ضوء" و "مظلم" للتلوين/تلوين (عبر منافذ ELM)

العقدة

• FNM: بسهولة ومتسقة إدارة العقدة.
• .nvimrc تعيين لاستخدام أحدث lts/iron .

مقابل الكود

• يوفر هذا القالب كل من الامتدادات الموصى بها وإعدادات مساحة العمل.
• سيطالبك VS Code بتثبيتها عند فتح مساحة العمل لأول مرة.

الوبر/التنسيق

• تنسيق الدردار
• standardjs
• أجمل
• تنسيق الوبر
• Red Hat Yaml (LSP)
• حتى أفضل توم

Elm + Tailwind CSS

• MAX_HOFFMANN CSS AMANCH TAILWIND في ELM لتغييرات VSCODE يتم تنفيذها.

ابدأ

تثبيت tiged

لاستنساخ هذا المستودع ، الخالي من .git ، يمكنك إما استخدام npx degit أو تثبيت tiged محليًا وتشغيل degit بدون npx . ymmv.

Tiged هو شوكة تتناول عددًا من المشكلات ، ويجب أن تكون مفضلة. لتثبيته ، قم بتشغيل:

npm uninstall -g degit
npm install -g tiged

على الأرجح ، سوف يستدعي npx degit degit . الثنائي المثبت محليًا يتأكد من قيامك بتشغيل tiged بدلاً من ذلك.

الاطلاع على القالب

1. استنساخ القالب:
   1. باستخدام NPX: npx degit gacallea/elm_vite_tailwind_template my-elm-app
   2. Binary المحلي: degit gacallea/elm_vite_tailwind_template my-elm-app
2. أدخل المشروع: cd my-elm-app
3. تثبيت التبعيات: npm install
4. ابدأ التطوير: npm run dev

الأوامر المتاحة

السيناريو	فعل
postinstall	تثبيت أدوات الدردار
ديف	فيت
prebuild	تثبيت أدوات الدردار
يبني	بناء Vite
معاينة	NPM Run Build ؛ معاينة Vite
معيار	قياسي -الإصلاح src /* / .js
تخفيض السعر	Markdown Standard-Fix SRC /* / .MD
مراجعة	Elm-Review-Fix-All
امتحان	درح الاختبار RS

المساهمة

المساهمات والنقد البناء موضع ترحيب. إذا كنت تعتقد أنني مبالغ فيه ، فلا تتردد في مناقشة. ما زلت أجرب هذا ، كفرصة تعليمية ، وأنا أسعى لتحسين القالب قدر الإمكان.

السنانير قبل الالتزام (WIP)

يعتمد هذا الريبو على ما قبل الالتزام CI للتأكد من فرض جميع معايير الترميز المقترحة باستخدام خطافات GIT. يمكنك أيضًا تثبيت ما قبل الالتزام محليًا لتطبيق نفس التكوين محليًا.

شكر وتقدير

استلهم هذا القالب من قالب ليندسي ك.