elm_vite_tailwind_template

Vite、Elm、Tailwind CSS、およびDaisyui

Vite、Tailwind CSS、およびDaisyuiを使用したELM Webアプリケーションを構築するための意見のテンプレート。

• ELMの詳細については、Elmの公式ホームページをご覧ください。
• Vite JSの詳細については、Vite JSの公式ドキュメントをご覧ください。
• Tailwind CSSの詳細については、Tailwind CSSの公式ドキュメントをご覧ください。
• Daisyuiの詳細については、Daisyuiの公式ドキュメントをご覧ください。

ツーリング

vite

• Vite-Plugin-Elm：ホットモジュールリロードを備えたELMモジュールをコンパイルします。
• Vite-Plugin-Webfont-DL：Googleフォントを注入して、Webサイトのパフォーマンスを向上させます。
• Vite-Plugin-Compression：リソースを圧縮して、Webサイトのパフォーマンスを向上させます。
• Vite-Plugin-Imagemin：画像資産を圧縮して、Webサイトのパフォーマンスを向上させます。

エルム

• ELM-Tooling：ELMツールを管理するコマンドラインプログラム。
• ELM-FORMAT：公式のELMスタイルガイドに従って、ELMソースコードをフォーマットします。
• ELM-TEST：ELMコードのWrite UnitとFuzzテスト。
• Elm-Review：ELMプロジェクトを分析し、ユーザーがそれらを見つける前に間違いを見つけます。

パッケージ

有益な可能性のあるELMパッケージの最終候補者リスト。提案として含まれています：

• HMSK/ELM-Vite-Plugin-Helper：Vite-Plugin-Elmを使用するためのヘルパーを提供します。
• TESK9/Accessible-HTML：アクセス可能なWebサイトの書き込みを簡単にします。
• Lattyware/elm-fontawesome：ネイティブフォント素晴らしい統合とサポート。

それらを自由に削除するには：

1. それらを使用しないでください
2. npm run review実行します

Tailwind CSS

公式プラグインはデフォルトでインストールされます：

• @tailwindcss/タイポグラフィ
• @tailwindcss/forms
• @tailwindcss/container-queries
• @tailwindcss/aspect-ratio

daisyui

「最も人気があり、無料でオープンソースの追い風CSSコンポーネントライブラリ」 。

Daisyui：すべてのフレームワークに取り組むことを目的としたTailwind CSSクラスコンポーネントライブラリ。 DaisyuiのCSSの性質により、ELMの統合が可能になり、簡単に使用できます。含まれる例：

• ページ全体は、Daisyuiヒーローセクションです
• カウンターボタンはDaisyuiボタンです
• 基本的なdiasyui 'light' and 'Dark' Theming/Coloring（ELM PORTS経由）

ノード

• FNM：ノードを簡単かつ一貫して管理します。
• .nvimrc最新のlts/ironを使用するように設定されています。

VSコード

• このテンプレートは、推奨される拡張機能とワークスペース設定の両方を提供します。
• VSコードは、ワークスペースを初めて開くときにそれらをインストールするように求められます。

Lint/Format

• ELM形式
• StandardJS
• きれい
• マークダウンリント
• レッドハットヤムル（LSP）
• さらに良いToml

Elm + Tailwind CSS

• @max_hoffmann vscode変更のためのエルムの驚くべきテールウィンドCSSが実装されています。

始めましょう

Tigedをインストールします

.gitのないこのリポジトリをクローンするには、 npx degitを使用するか、局所的にtigedをインストールし、 npxなしでdegit実行できます。 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. ローカルバイナリ： degit gacallea/elm_vite_tailwind_template my-elm-app
2. プロジェクトを入力： cd my-elm-app
3. 依存関係のインストール： npm install
4. 開発を開始： npm run dev

利用可能なコマンド

スクリプト	アクション
ポストインストール	エルムツールインストール
開発者	vite
プレビルド	エルムツールインストール
建てる	Viteビルド
プレビュー	npm run build; Viteプレビュー
標準	標準-fix src /* / .js
マークダウン	標準マークダウン - フィックスSRC /* / .md
レビュー	elm-review -fix-all
テスト	ELM-TEST-RS

貢献

貢献と建設的な批判は大歓迎です。私がそれをやりすぎていると思うなら、お気軽に議論してください。私はまだ学習の機会としてこれを実験しており、テンプレートを可能な限り改善するよう努めています。

事前コミットフック（WIP）

このリポジトリは、事前C-CHIT-CIに依存して、すべての提案されたコーディング標準がGitフックで実施されていることを確認します。 Pre-Commitをローカルにインストールして、同じ構成をローカルに適用することもできます。

謝辞

このテンプレートは、Lindsay K Wardellのテンプレートに触発されました。