elm_vite_tailwind_template

Vite, Elm, Tailwind CSS 및 Daisyui

Vite, Tailwind CSS 및 Daisyui를 사용하여 Elm 웹 애플리케이션을 구축하기위한 의견 템플릿.

• Elm에 대한 자세한 내용은 Elm의 공식 홈페이지를 확인하십시오.
• Vite JS에 대한 자세한 내용은 Vite JS의 공식 문서를 확인하십시오.
• Tailwind CSS에 대한 자세한 내용은 Tailwind CSS의 공식 문서를 확인하십시오.
• Daisyui에 대한 자세한 내용은 Daisyui의 공식 문서를 확인하십시오.

압형

vite

• Vite-Plugin-ELM : 핫 모드 리로드로 Elm 모듈을 컴파일합니다.
• Vite-Plugin-Webfont-DL : Google 글꼴을 주입하여 웹 사이트의 성능을 향상시킵니다.
• Vite-Plugin-compression : 리소스를 압축하여 웹 사이트의 성능을 향상시킵니다.
• Vite-Plugin-Imagemin : 이미지 자산을 압축하여 웹 사이트의 성능을 향상시킵니다.

엘름

• Elm-Tooling : Elm 도구를 관리하는 명령 줄 프로그램.
• Elm-Format : 공식 Elm 스타일 가이드에 따른 Format Elm 소스 코드.
• 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 실행하십시오

테일 윈드 CSS

공식 플러그인은 기본적으로 설치됩니다.

• @tailwindcss/typography
• @tailwindcss/forms
• @tailwindcss/container-queries
• @tailwindcss/agage-ratio

Daisyui

"가장 인기있는 무료 및 오픈 소스 테일 윈드 CSS 구성 요소 라이브러리" .

Daisyui : 모든 프레임 워크에서 작업하는 것을 목표로하는 Tailwind CSS Classes 구성 요소 라이브러리. Daisyui의 CSS 특성은 Elm 통합과 사용이 가능합니다. 예제는 다음과 같습니다.

• 전체 페이지는 Daisyui Hero 섹션입니다
• 카운터 버튼은 Daisyui 버튼입니다
• 기본 Daisyui 'Light'및 'Dark'테마/색칠 (Elm 포트를 통해)

마디

• FNM : 노드를 쉽고 일관되게 관리합니다.
• .nvimrc 최신 lts/iron 사용하도록 설정했습니다.

대 코드

• 이 템플릿은 권장 확장 및 작업 공간 설정을 모두 제공합니다.
• vs 코드는 처음으로 작업 공간을 열 때 설치하라는 메시지가 표시됩니다.

보풀/형식

• 엘름 형식
• Standardjs
• 더 예쁘다
• 마크 다운 보풀
• Red Hat Yaml (LSP)
• 더 나은 Toml

Elm + Tailwind CSS

• @max_hoffmann vscode 변경을위한 Elm의 Amazing Tailwind CSS가 구현됩니다.

시작하세요

토드를 설치하십시오

.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 실행 빌드; vite 미리보기
기준	표준 -fix src /* / .js
가격 인하	표준 마크 다운 -Fix Src /* / .md
검토	Elm-Review-Fix-all
시험	ELM-TEST-RS

기여

기여와 건설적인 비판을 환영합니다. 내가 그것을 과장하고 있다고 생각되면 자유롭게 토론하십시오. 나는 여전히 학습 기회로서 이것을 실험하고 있으며 가능한 한 템플릿을 개선하기 위해 노력하고 있습니다.

사전 커밋 후크 (WIP)

이 repo는 사전 커미트 CI에 의존하여 제안 된 모든 코딩 표준이 GIT 후크와 함께 시행되도록합니다. 동일한 구성을 로컬로 적용하기 위해 로컬로 사전 커밋을 설치할 수도 있습니다.

감사의 말

이 템플릿은 Lindsay K Wardell의 템플릿에서 영감을 받았습니다.