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的模板。