elm_vite_tailwind_template

Vite, Elm, Tailwind CSS e Daisyui

Modelo opinativo para a construção de aplicativos da Web do ELM usando Vite, Tailwind CSS e Daisyui.

• Para saber mais sobre o ELM, confira a página inicial oficial de Elm.
• Para obter mais informações sobre o Vite JS, consulte a documentação oficial da Vite JS.
• Para obter mais informações sobre o Tailwind CSS, consulte a documentação oficial do Tailwind CSS.
• Para mais informações sobre Daisyui, consulte a documentação oficial de Daisyui.

Ferramentas

Vite

• Vite-Plugin-Elm: Compile um módulo ELM com recarregamento de módulo quente.
• Vite-Plugin-WebFont-DL: Injete o Google Fontes para melhorar o desempenho do site.
• Vite-Plugin-Compression: Compress Recursos para melhorar o desempenho do site.
• Vite-Plugin-Imagimin: Compacte ativos de imagem para melhorar o desempenho do site.

Olmo

• ELM-Tooling: Programa de linha de comando que gerencia suas ferramentas ELM.
• ELM-FORMAT: FORMAT ELM Código-fonte de acordo com o Guia Oficial do Estilo Elm.
• ELM-TEST: Escreva testes de unidade e fuzz para o código ELM.
• Elm-Review: Analise os projetos de ELM e encontre erros antes que seus usuários os encontrem.

Pacotes

Lista de pacotes de ELM que podem ser benéficos. Incluído como sugestões:

• HMSK/ELM-VITE-PLUGIN-HELPER: fornece ajudantes para o uso de vite-plugin-elm.
• TESK9/Acessível-HTML: facilita a redação de sites acessíveis.
• Lattyware/Elm-Fontawesome: Fonte nativa Integração e suporte impressionantes.

Para removê -los, sinta -se livre:

1. não para usá -los
2. Run npm run review

Tailwind CSS

Os plugins oficiais são instalados por padrão:

• @tailwindcss/tipografia
• @tailwindcss/forms
• @Tailwindcss/contêiner-quadries
• @Tailwindcss/aspecto-razão

Daisyui

"A biblioteca de componentes CSS mais popular, gratuita e de código aberto" .

Daisyui: Uma biblioteca de componentes de classes CSS do Tailwind CSS, com o objetivo de trabalhar em todas as estruturas. A natureza do CSS do Daisyui torna possível a integração do ELM e a brisa de usar. Exemplos incluídos:

• A página inteira é uma seção de herói da Daisyui
• Os botões do balcão são botões daaisyui
• Daisyui básico 'Light' e 'Dark' Theming/Coloring (via Elm Ports)

Nó

• FNM: Gerencie de maneira fácil e consistente.
• .nvimrc definido para usar lts/iron mais recente.

Vs código

• Este modelo fornece extensões recomendadas e configurações de espaço de trabalho.
• O código VS solicitará que você os instale quando abrir o espaço de trabalho pela primeira vez.

Fiapo/formato

• ELM Formato
• StandardJS
• Mais bonito
• Markdown fia
• Red Hat Yaml (LSP)
• Ainda melhor Toml

Elm + CSS de Tailwind

• @Max_Hoffmann CSS Amazing Tailwind no ELM para alterações no VSCODE são implementadas.

Comece

Instale o Tiged

Para clonar esse repositório, desprovido de .git , você pode usar npx degit ou instalar tiged localmente e executar degit sem npx . Ymmv.

O Tiged é um garfo que aborda uma série de problemas e deve ser preferido. Para instalá -lo, execute:

npm uninstall -g degit
npm install -g tiged

Provavelmente, npx degit invocaria degit . Um binário instalado localmente garante que você esteja executando tiged .

Ler o modelo

1. Clone o modelo:
   1. Usando NPX: npx degit gacallea/elm_vite_tailwind_template my-elm-app
   2. Binário Local: degit gacallea/elm_vite_tailwind_template my-elm-app
2. Digite o projeto: cd my-elm-app
3. Instale dependências: npm install
4. Comece a desenvolver: npm run dev

Comandos disponíveis

script	Ação
Postinstall	Instalação de elm-tooling
Dev	vite
pré -construção	Instalação de elm-tooling
construir	Vite Build
visualização	NPM Run Build; visualização de vite
padrão	Padrão - -Fix Src /* / .js
Markdown	Markdown Standard-Fix Src /* / .md
análise	Elm-Review--Fix-All
teste	ELM-TEST-RS

Contribuindo

Contribuições e críticas construtivas são bem -vindas. Se você acha que estou exagerando, fique à vontade para discutir. Ainda estou experimentando isso, como uma oportunidade de aprendizado, e me esforço para melhorar o modelo o máximo possível.

ganchos pré-comprometidos (WIP)

Este repositório depende do pré-compromisso-CI para garantir que todos os padrões de codificação sugeridos sejam aplicados com ganchos git. Você também pode instalar o pré-compromisso localmente para aplicar a mesma configuração localmente.

Agradecimentos

Este modelo foi inspirado no modelo de Lindsay K Wardell.