elm_vite_tailwind_template

VITE, ELM, CSS TANDWind et Daisyui

Modèle d'opinion pour créer des applications Web Elm à l'aide de VITE, du vent arrière CSS et Daisyui.

• Pour en savoir plus sur Elm, consultez la page d'accueil officielle d'Elm.
• Pour plus d'informations sur Vite JS, consultez la documentation officielle de Vite JS.
• Pour plus d'informations sur Tailwind CSS, consultez la documentation officielle de Tailwind CSS.
• Pour plus d'informations sur Daisyui, consultez la documentation officielle de Daisyui.

Outillage

Vite

• VITE-PLUGIN-ELM: compilez un module ELM avec un rechargement de module chaud.
• VITE-PLUGIN-WEBFONT-DL: Injectez Google Fonts pour améliorer les performances du site Web.
• Vite-Plugin-Compression: Compress Resources pour améliorer les performances du site Web.
• Vite-Plugin-Imagemin: Compress Image Assets Pour améliorer les performances du site Web.

Orme

• Elm-Toolling: Programme de ligne de commande qui gère vos outils ELM.
• Elm-Format: Format Code source ELM selon le guide officiel de style ELM.
• ELM-Test: Écrivez des tests d'unité et de fuzz pour le code ELM.
• Elm-Review: Analyser les projets ELM et trouver des erreurs avant que vos utilisateurs ne les trouvent.

Packages

La liste restreinte des packages ELM qui pourraient être bénéfiques. Inclus comme suggestions:

• HMSK / ELM-vite-Plugin-Helper: fournit des aides à l'utilisation de Vite-Plugin-ELM.
• TESK9 / accessible-html: facilite la rédaction de sites Web accessibles.
• Lattyware / Elm-Fontawesome: Native Font Integration and Support Awesome Intégration.

Pour les supprimer, n'hésitez pas à:

1. ne pas les utiliser
2. Exécution npm run review

CSS du vent arrière

Les plugins officiels sont installés par défaut:

• @ tailwindcss / typographie
• @ tailwindcss / formulaires
• @ Tailwindcss / Container-Quéries
• @ Tailwindcss / Aspect Ratio

marguerite

"La bibliothèque de composants CSS la plus populaire, la plus libre et la plus ouverte" .

Daisyui: une bibliothèque de composants de classes CSS CSS Tailwind, visant à travailler sur tous les frameworks. La nature CSS de Daisyui rend possible l'intégration des ELM et un jeu d'enfant à utiliser. Exemples inclus:

• La page entière est une section de héros de Daisyui
• Les boutons de comptoir sont des boutons Daisyui
• Daisyui de base «Lumière» et «Dark» THEMING / COLORING (via les ports de l'orme)

Nœud

• FNM: Gérez facilement et cohérentement le nœud.
• .nvimrc SET pour utiliser les derniers lts/iron .

VS Code

• Ce modèle fournit à la fois des extensions recommandées et des paramètres d'espace de travail.
• VS Code vous invitera à les installer lorsque vous ouvrez l'espace de travail pour la première fois.

Peluche / format

• Format de l'orme
• Standardjs
• Plus joli
• Markdown Lint
• Red Hat Yaml (LSP)
• Encore mieux Toml

Elm + Tailwind CSS

• @Max_Hoffmann CSS CSS Amazing Tailwind dans ELM pour les modifications VSCODE est implémenté.

Commencer

Installer tiged

Pour cloner ce référentiel, dépourvu de .git , vous pouvez soit utiliser npx degit ou installer tiged localement et exécuter degit sans npx . Ymmv.

Tiged est une fourche qui traite d'un certain nombre de problèmes et doit être préférée. Pour l'installer, exécutez:

npm uninstall -g degit
npm install -g tiged

Très probablement, npx degit invoquerait degit . Un binaire installé localement s'assure que vous utilisez plutôt tiged .

Parcourir le modèle

1. Clone le modèle:
   1. Utilisation de NPX: npx degit gacallea/elm_vite_tailwind_template my-elm-app
   2. Binaire local: degit gacallea/elm_vite_tailwind_template my-elm-app
2. Entrez le projet: cd my-elm-app
3. Installation des dépendances: npm install
4. Commencer à développer: npm run dev

Commandes disponibles

scénario	action
post-stall	Installation d'outils d'orme
dev	vite
préconstruire	Installation d'outils d'orme
construire	Vite Build
prévisualisation	NPM Run Build; aperçu
standard	Standard - Fix Src / * / .js
réduction	Markdown standard - Fix Src / * / .md
revoir	Elm-Review - Fix-All
test	Elm-test-RS

Contributif

Les contributions et les critiques constructives sont les bienvenues. Si vous pensez que j'en fait trop, n'hésitez pas à discuter. J'expérimente toujours avec cela, comme une opportunité d'apprentissage, et je m'efforce d'améliorer le modèle autant que possible.

Crows pré-engagement (WIP)

Ce repo s'appuie sur le pré-Commit-CI pour s'assurer que toutes les normes de codage suggérées sont appliquées avec des crochets GIT. Vous pouvez également installer un pré-comité localement pour appliquer la même configuration localement.

Remerciements

Ce modèle a été inspiré par le modèle de Lindsay K Wardell.