elm_vite_tailwind_template

Vite, Elm, Tailwind CSS และ Daisyui

เทมเพลตความคิดเห็นสำหรับการสร้างเว็บแอปพลิเคชัน ELM โดยใช้ Vite, Tailwind CSS และ Daisyui

• หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับ Elm ลองดูหน้าแรกอย่างเป็นทางการของ Elm
• สำหรับข้อมูลเพิ่มเติมเกี่ยวกับ Vite JS ให้ตรวจสอบเอกสารทางการของ Vite JS
• สำหรับข้อมูลเพิ่มเติมเกี่ยวกับ Tailwind CSS ตรวจสอบเอกสารทางการของ Tailwind CSS
• สำหรับข้อมูลเพิ่มเติมเกี่ยวกับ Daisyui ตรวจสอบเอกสารทางการของ Daisyui

การใช้เครื่องมือ

Vite

• Vite-Plugin-Elm: รวบรวมโมดูล ELM ด้วยการโหลดซ้ำของโมดูลร้อน
• Vite-Plugin-Webfont-DL: ฉีด Google Fonts เพื่อปรับปรุงประสิทธิภาพของเว็บไซต์
• Vite-plugin-compression: บีบอัดทรัพยากรเพื่อปรับปรุงประสิทธิภาพของเว็บไซต์
• Vite-Plugin-Imagemin: บีบอัดสินทรัพย์รูปภาพเพื่อปรับปรุงประสิทธิภาพของเว็บไซต์

เอล์ม

• Elm-tooling: โปรแกรมบรรทัดคำสั่งที่จัดการเครื่องมือ ELM ของคุณ
• Elm-Format: รูปแบบซอร์สโค้ด Elm ตามคู่มือ Elm Style อย่างเป็นทางการ
• ELM-TEST: การทดสอบหน่วยและการทดสอบฟัซซี่สำหรับรหัส ELM
• Elm-Review: วิเคราะห์โครงการ ELM และค้นหาข้อผิดพลาดก่อนที่ผู้ใช้ของคุณจะพบพวกเขา

แพ็คเกจ

รายการสั้น ๆ ของแพ็คเกจ ELM ที่อาจเป็นประโยชน์ รวมเป็นคำแนะนำ:

• HMSK/ELM-VITE-PLUGIN-HELPER: ให้ความช่วยเหลือสำหรับการใช้ Vite-Plugin-Elm
• tesk9/accessible-html: ทำให้การเขียนเว็บไซต์เข้าถึงได้ง่ายขึ้น
• Lattyware/Elm-Fontawesome: การรวมและการสนับสนุนแบบอักษรพื้นเมือง

เพื่อลบออกรู้สึกฟรี:

1. ไม่ใช้พวกเขา
2. npm run review

tailwind css

ปลั๊กอินอย่างเป็นทางการถูกติดตั้งโดยค่าเริ่มต้น:

• @tailwindcss/ตัวอักษร
• @tailwindcss/แบบฟอร์ม
• @tailwindcss/container-queries
• @tailwindcss/อัตราส่วนอสังหาริมทรัพย์

daisyui

"ไลบรารีส่วนประกอบ CSS ที่ได้รับความนิยมมากที่สุดฟรีและโอเพนซอร์ส"

Daisyui: ห้องสมุดส่วนประกอบคลาส CSS ของ Tailwind โดยมีจุดประสงค์เพื่อทำงานกับกรอบทั้งหมด ธรรมชาติ CSS ของ Daisyui ทำให้การรวม Elm เป็นไปได้และใช้สายลม ตัวอย่างรวม:

• ทั้งหน้าเป็นส่วนฮีโร่ Daisyui
• ปุ่มเคาน์เตอร์เป็นปุ่ม daisyui
• พื้นฐาน Daisyui 'Light' และ 'Dark'/การระบายสี (ผ่านพอร์ต Elm)

โหนด

• FNM: จัดการโหนดได้อย่างง่ายดายและสม่ำเสมอ
• .nvimrc ตั้งค่าให้ใช้ lts/iron ล่าสุด

รหัส VS

• เทมเพลตนี้ให้ทั้งส่วนขยายที่แนะนำและการตั้งค่าพื้นที่ทำงาน
• รหัส VS จะแจ้งให้คุณติดตั้งเมื่อคุณเปิดพื้นที่ทำงานเป็นครั้งแรก

ผ้าสำลี/รูปแบบ

• รูปแบบเอล์ม
• standardjs
• สวยกว่า
• ผ้าสำลี Markdown
• Red Hat Yaml (LSP)
• Toml ดียิ่งขึ้น

Elm + Tailwind CSS

• @max_hoffmann css tailwind ที่น่าทึ่งใน Elm สำหรับการเปลี่ยนแปลง vscode ถูกนำมาใช้

เริ่มต้นใช้งาน

ติดตั้ง tiged

ในการโคลนที่เก็บนี้ปราศจาก .git คุณสามารถใช้ npx degit หรือติดตั้ง tiged ในเครื่องและเรียกใช้ degit โดยไม่ต้อง npx ymmv.

Tiged เป็นส้อมที่แก้ไขปัญหาจำนวนมากและควรเป็นที่ต้องการ ในการติดตั้ง Run:

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 Run Build; Vite Preview
มาตรฐาน	Standard -Fix Src /* / .js
การทำเครื่องหมาย	Standard-Markdown-Fix Src /* / .md
ทบทวน	Elm-Review-Fix-all
ทดสอบ	ELM-TEST-RS

การบริจาค

ยินดีต้อนรับการมีส่วนร่วมและการวิจารณ์ที่สร้างสรรค์ หากคุณคิดว่าฉันทำมันมากเกินไปอย่าลังเลที่จะพูดคุย ฉันยังคงทดลองใช้สิ่งนี้เป็นโอกาสในการเรียนรู้และฉันพยายามปรับปรุงเทมเพลตให้มากที่สุด

ตะขอล่วงหน้า (WIP)

repo นี้ขึ้นอยู่กับ pre-comit-CI เพื่อให้แน่ใจว่ามาตรฐานการเข้ารหัสที่แนะนำทั้งหมดจะถูกบังคับใช้ด้วยตะขอ Git คุณสามารถติดตั้ง pre-commit ในเครื่องเพื่อใช้การกำหนดค่าเดียวกันในเครื่อง

กิตติกรรมประกาศ

เทมเพลตนี้ได้รับแรงบันดาลใจจากแม่แบบของ Lindsay K Wardell