elm_vite_tailwind_template

Vite, Elm, Tailwind CSS y Daisyui

Plantilla obstinada para construir aplicaciones web ELM utilizando Vite, Tailwind CSS y Daisyui.

• Para obtener más información sobre ELM, consulte la página de inicio oficial de Elm.
• Para obtener más información sobre Vite JS, consulte la documentación oficial de Vite JS.
• Para obtener más información sobre Tailwind CSS, consulte la documentación oficial de Tailwind CSS.
• Para obtener más información sobre Daisyui, consulte la documentación oficial de Daisyui.

Estampación

Vite

• Vite-Plugin-Elm: compile un módulo ELM con la recarga del módulo caliente.
• Vite-Plugin-Webfont-DL: inyecte Google Fonts para mejorar el rendimiento del sitio web.
• Vite-Plugin-Compression: comprimir recursos para mejorar el rendimiento del sitio web.
• Vite-Plugin-ImageMin: comprimir activos de imagen para mejorar el rendimiento del sitio web.

Olmo

• ELM-TOOLING: Programa de línea de comandos que administra sus herramientas ELM.
• ELM-Format: Formato de código fuente ELM de acuerdo con la Guía de estilo oficial de Elm.
• ELM-TEST: Unidad de escritura y pruebas de fuzz para el código ELM.
• ELM-Review: analice los proyectos ELM y encuentre errores antes de que sus usuarios los encuentren.

Paquetes

Lista de paquetes ELM que podrían ser beneficiosos. Incluido como sugerencias:

• HMSK/Elm-Vite-Plugin-Helper: proporciona ayudantes para usar Vite-Plugin-Elm.
• TESK9/Accesible-HTML: facilita la escritura de sitios web accesibles.
• Lattyware/ELM-FONTAWESE: Fuente nativa Integración y soporte impresionante.

Para eliminarlos, siéntase libre:

1. no usarlos
2. npm run review Run

CSS de viento de cola

Los complementos oficiales se instalan de forma predeterminada:

• @TailWindcss/Tipografía
• @TailWindcss/Forms
• @tailwindcss/contenedores
• @TailWindcss/Aspect-Ratio

marina

"La biblioteca de componentes CSS de viento de cola más popular, gratuita y de código abierto" .

Daisyui: una biblioteca de componentes CSS Classes de viento de cola, con el objetivo de trabajar en todos los marcos. La naturaleza CSS de Daisyui hace posible la integración de Elm y es una brisa de usar. Ejemplos incluidos:

• Toda la página es una sección de héroes de Daisyui
• Los botones de mostrador son botones Daisyui
• Daisyui básico 'Light' y 'Dark' Teming/Coloring (a través de puertos Elm)

Nodo

• FNM: Administre de manera fácil y consistente el nodo.
• .nvimrc establecido para usar los últimos lts/iron .

VS Código

• Esta plantilla proporciona extensiones recomendadas y configuraciones de espacio de trabajo.
• VS Code le pedirá que los instale cuando abra el espacio de trabajo por primera vez.

Pelusa

• Formato de olmo
• StandardJS
• Más bonito
• Pelusa
• Red Hat Yaml (LSP)
• Aún mejor toml

Elm + CSS de viento de cola

• @max_hoffmann se implementan CSS increíbles de viento de cola en ELM para los cambios de VSCode.

Empezar

Instalar tiged

Para clonar este repositorio, desprovisto de .git , puede usar npx degit o instalar tiged localmente y ejecutar degit sin npx . Ymmv.

Tiged es una bifurcación que aborda una serie de problemas y debe preferirse. Para instalarlo, ejecute:

npm uninstall -g degit
npm install -g tiged

Lo más probable es que npx degit invocara degit . Un binario instalado localmente se asegura de que esté ejecutando tiged en su lugar.

Examinar la plantilla

1. Clon la plantilla:
   1. Usando NPX: npx degit gacallea/elm_vite_tailwind_template my-elm-app
   2. Binario local: degit gacallea/elm_vite_tailwind_template my-elm-app
2. Ingrese el proyecto: cd my-elm-app
3. Dependencias de instalación: npm install
4. Comience a desarrollar: npm run dev

Comandos disponibles

guion	acción
postinstall	instalación
enchufe	vite
prebuild	instalación
construir	Vite Build
avance	NPM Run Build; VITE Preview
estándar	Estándar -FIX SRC /* / .JS
reducción	Standard-Markdown-FIX SRC /* / .MD
revisar	Elm-Review--Fix-All
prueba	Elm-test-rs

Que contribuye

Las contribuciones y las críticas constructivas son bienvenidas. Si crees que lo estoy exagerando, siéntete libre de discutir. Todavía estoy experimentando con esto, como una oportunidad de aprendizaje, y me esfuerzo por mejorar la plantilla tanto como sea posible.

Ganchos previos al comercio (WIP)

Este repositorio se basa en el CI previo al Commit para asegurarse de que todos los estándares de codificación sugeridos se apliquen con gits. También puede instalar precomito localmente para aplicar la misma configuración localmente.

Expresiones de gratitud

Este plantado se inspiró en la plantilla de Lindsay K Wardell.