elm_vite_tailwind_template

Vite，Elm，Tailwind CSS和Daisyui

使用Vite，Tailwind CSS和Daisyui構建ELM Web應用程序的自燃模板。

• 要了解有關ELM的更多信息，請查看Elm的官方主頁。
• 有關Vite JS的更多信息，請查看Vite JS的官方文檔。
• 有關CSS的更多信息，請查看Tailwind CSS的官方文檔。
• 有關Daisyui的更多信息，請查看Daisyui的官方文件。

工具

Vite

• Vite-Plugin-Elm：用熱模塊重新加載編譯ELM模塊。
• Vite-Plugin-Webfont-DL：注入Google字體以提高網站的性能。
• Vite-Plugin-Compression：壓縮資源以改善網站的性能。
• Vite-Plugin-agagemin：壓縮圖像資產以提高網站的性能。

榆樹

• ELM-Tooling：管理您的ELM工具的命令行程序。
• ELM-Format：根據官方ELM樣式指南格式化ELM源代碼。
• ELM測試：編寫ELM代碼的單元和模糊測試。
• ELM-REVIEW：分析ELM項目並在您的用戶找到錯誤之前找到錯誤。

軟件包

可能有益的榆樹包裝的候選名單。包括建議：

• HMSK/ELM-VITE-PLUGIN-HELPER：提供使用Vite-Plugin-Elm的幫助者。
• TESK9/可訪問的HTML：使寫作可訪問的網站更加容易。
• Lattyware/ELM-FONTAWESY：本機字體很棒的集成和支持。

刪除它們會自由：

1. 不使用它們
2. 運行npm run review

尾風CSS

默認情況下安裝官方插件：

• @tailwindcss/版式
• @tailwindcss/表格
• @tailwindcss/Container-Queries
• @tailwindcss/factive-ratio

daisyui

“最受歡迎，最免費和開源的尾風CSS組件庫” 。

Daisyui：側風CSS類組件庫，旨在在所有框架上工作。 Daisyui的CSS性質使ELM整合成為可能，並且可以輕而易舉。示例包括：

• 整個頁面是一個雛菊英雄部分
• 計數器按鈕是daisyui按鈕
• 基本的daisyui“光”和“黑暗”主題/著色（通過ELM端口）

節點

• FNM：輕鬆，始終如一地管理節點。
• .nvimrc設置使用最新的lts/iron 。

VS代碼

• 該模板既提供了推薦的擴展名和工作區設置。
• VS代碼將在您首次打開工作區時提示您安裝它們。

棉布/格式

• 榆樹格式
• 標準j
• 更漂亮
• 降級棉布
• 紅帽YAML（LSP）
• 甚至更好的湯姆

榆樹 +尾風CSS

• @max_hoffmann在ELM中進行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

可用命令

腳本	行動
郵政安裝	ELM-Tooling安裝
開發	Vite
預建	ELM-Tooling安裝
建造	Vite build
預覽	NPM運行構建； Vite預覽
標準	標準-fix src /* / .js
降價	標準標記 - fix src /* / .md
審查	ELM-REVIEW-FIX-ALL
測試	ELM-TEST-RS

貢獻

歡迎貢獻和建設性批評。如果您認為我正在過度使用它，請隨時討論。我仍在嘗試這個機會，作為學習機會，我努力盡可能地改進模板。

預簽名（WIP）

此存儲庫依賴於預先使用的CI來確保所有建議的編碼標準都使用GIT鉤執行。您也可以在本地安裝預訂，以在本地應用相同的配置。

致謝

該模板的靈感來自Lindsay K Wardell的模板。