elm_vite_tailwind_template

Vite, Elm, Rückenwind -CSS und Daisyui

Ansichtsvorlage zum Erstellen von ELM -Webanwendungen mit Vite, Tailwind CSS und Daisyui.

• Um mehr über Elm zu erfahren, lesen Sie die offizielle Homepage von Elm.
• Weitere Informationen zu Vite JS finden Sie in der offiziellen Dokumentation von Vite JS.
• Weitere Informationen zu Tailwind CSS finden Sie in der offiziellen Dokumentation von Tailwind CSS.
• Weitere Informationen zu Daisyui finden Sie in Daisyuis offizielle Dokumentation.

Werkzeug

Vite

• VITE-Plugin-ELM: Kompilieren Sie ein ELM-Modul mit Hot-Modul-Reload.
• VITE-Plugin-Webfont-DL: Geben Sie Google-Schriftarten ein, um die Leistung der Website zu verbessern.
• VITE-Plugin-Kompression: Kompress-Ressourcen zur Verbesserung der Leistung der Website.
• VITE-Plugin-Imagemin: Komprimieren Sie Bildvermögen, um die Leistung der Website zu verbessern.

Ulme

• ELM-TOOLING: Befehlszeilenprogramm, mit dem Ihre ELM-Tools verwaltet werden.
• ELM-Format: Format ELM-Quellcode gemäß dem offiziellen ELM Style Guide.
• ELM-Test: Schreiben Sie Einheit und Fuzz-Tests für ELM-Code.
• ELM-Review: Analysieren Sie ELM-Projekte und finden Sie Fehler, bevor Ihre Benutzer sie finden.

Pakete

Shortlist von ELM -Paketen, die von Vorteil sein könnten. Als Vorschläge eingeschlossen:

• HMSK/ELM-Vite-Plugin-Helper: Bietet Helfern für die Verwendung von Vite-Plugin-ELM.
• Tesk9/Accessable-HTML: Erleichterte das Schreiben zugänglicher Websites.
• Lattyware/Elm-fontawesome: Native Schriftartintegration und -unterstützung.

Um sie zu entfernen, fühlen sich frei:

1. sie nicht benutzen
2. Führen Sie npm run review

Rückenwind -CSS

Die offiziellen Plugins sind standardmäßig installiert:

• @Tailwindcss/Typografie
• @tailwindcss/forms
• @Tailwindcss/Container-Querien
• @Tailwindcss/Aspektverhältnis

Daisyui

"Die beliebteste, kostenlose und open-Source-Tailwind-CSS-Komponentenbibliothek" .

Daisyui: Eine CSS -Klassenkomponentenbibliothek von Rückenwind, die auf alle Frameworks arbeiten soll. Die CSS -Natur von Daisyui ermöglicht die Integration von ELM und eine Kinderspiel. Beispiele gehörten:

• Die ganze Seite ist eine Daisyui -Heldenabteilung
• Die Zählerknöpfe sind Daisyui -Tasten
• grundlegende Daisyui 'hell' und 'dunkel' themen/färben (über Elm -Ports)

Knoten

• FNM: Einfach und konsequent den Knoten verwalten.
• .nvimrc set für die neueste lts/iron .

Vs Code

• Diese Vorlage bietet sowohl empfohlene Erweiterungen als auch Arbeitsbereicheinstellungen.
• VS Code fordert Sie auf, sie zu installieren, wenn Sie den Arbeitsbereich zum ersten Mal öffnen.

Lint/Format

• ELM -Format
• Standardjs
• Hübscher
• Markdown Lint
• Red Hat Yaml (LSP)
• Noch besser Toml

ELM + Tailwind CSS

• @max_hoffmann Amazing Tailwind CSS in ELM für VSCODE -Änderungen werden implementiert.

Fangen an

Tiged installieren

Um dieses Repository, ohne .git , zu klonen, können Sie entweder npx degit verwenden oder tiged lokal installieren und degit ohne npx ausführen. Ymmv.

TIGED ist eine Gabel, die eine Reihe von Problemen befasst und bevorzugt werden sollte. Um es zu installieren, führen Sie aus:

npm uninstall -g degit
npm install -g tiged

Höchstwahrscheinlich würde npx degit degit anrufen. Eine lokal installierte Binärin sorgt dafür, dass Sie stattdessen tiged ausführen.

Die Vorlage durchlesen

1. Klonen Sie die Vorlage:
   1. Verwenden Sie NPX: npx degit gacallea/elm_vite_tailwind_template my-elm-app
   2. Lokale binäre: degit gacallea/elm_vite_tailwind_template my-elm-app
2. Geben Sie das Projekt ein: cd my-elm-app
3. Installieren Sie Abhängigkeiten: npm install
4. Entwicklung beginnen: npm run dev

Verfügbare Befehle

Skript	Aktion
Postinstall	Elm-Tooling-Installation
Dev	vite
Prebuild	Elm-Tooling-Installation
bauen	Vite Build
Vorschau	NPM Run Build; VITE -Vorschau
Standard	Standard - -fix Src /* / .js
Markdown	Standard-Markdown--Fix SRC /* / .md
Rezension	Elm-Review--Fix-All
prüfen	Elm-Test-Rs

Beitragen

Beiträge und konstruktive Kritik sind willkommen. Wenn Sie glauben, dass ich es übertreibe, können Sie gerne diskutieren. Ich experimentiere immer noch damit als Lernmöglichkeit und bemühe mich, die Vorlage so weit wie möglich zu verbessern.

Pre-Commit-Haken (WIP)

Dieses Repo stützt sich auf Pre-Commit-CI, um sicherzustellen, dass alle vorgeschlagenen Codierungsstandards mit Git-Hooks durchgesetzt werden. Sie können auch vor Ort lokal installieren, um dieselbe Konfiguration lokal anzuwenden.

Anerkennung

Diese Vorlagen wurden von Lindsay K Wardells Vorlage inspiriert.