vitam

비타리

비타민은 프론트 엔드 프로젝트를위한 vite가있는 스타터 템플릿입니다. 이 템플릿은 정적 웹 사이트 구축에 중점을두고 방문 페이지 및 회사 웹 사이트와 같은 중소형 프로젝트에 적합합니다.

상태

특징

• Vite가있는 빠른 HMR
• PWA 지원
• 빠른 로컬 서버
• 이미지 자산 압축
• 핸들 바로 HTML 소형 파일을 분해합니다
• CSS의 지속성을 언급합니다
• 유용한 JavaScript 라이브러리
• 유용한 SCSS 기능 및 믹스 인과 함께
• eslint를 사용하여 유형을 확인합니다
• html- 밸리드 레이트를 사용한 HTML 검증
• Postcss로 스타일을 변환합니다
• Jest가있는 내장 테스트 러너

요구 사항

• 노드 v18 (18.13.0)

주요 종속성

• 방사
• 농담
• eslint
• html-vallidate
• 더 예쁘다
• vite
• 핸들 바
• TypeScript
• 사스

사용 방법

이 저장소를 복제하고 종속성을 설치하십시오

 yarn install

사용 가능한 명령

개발 모드에서 프로젝트를 시작하십시오

 yarn start

생산을위한 프로젝트를 구축하십시오

 yarn build

로컬 미리보기 생산 빌드

 yarn serve

HTML 파일을 확인하십시오

 yarn htmlValidate

프로젝트 파일을 보린하십시오

 yarn lint

프로젝트 파일을 수정하십시오

 yarn lint:fix

누락 된 TypeScript 타이핑을 설치하십시오

 yarn postInstall

패키지의 라이센스를 확인하십시오

 yarn checkLicense

테스트 프로젝트의 코드

 yarn test

 yarn test:watch

HTML

Vite-Plugin-Handlebar로 여러 HTML 파일을 번들링 할 수 있습니다. 필요한대로 핸들 바 컨텍스트를 확인하십시오.

여러 부분 파일을 사용하려면 부분 파일을 _partials 폴더에 추가하십시오.

src/_partials

이 예와 같은 다른 템플릿에서 부분 파일을 직접 호출 할 수 있습니다.

 {{> _header }}
  <main>
    <h1>Welcome to VITAM Docs!</h1>
    <p>VITAM is a front-end template with Vite for static websites.</p>
  </main>
{{> _footer }}

site.config.ts 사이트의 기본 정보를 관리합니다. 새 페이지를 만들 때 site.config.ts 편집해야합니다.

 const pagesData = {
  '/sample/index.html' : {
    locale : siteData . locale ,
    title : `Smaple Page | ${ siteData . siteName } ` ,
    description : `This is a sample page. ${ siteData . description } ` ,
    url : ` ${ siteData . url } /sampple/` ,
    ogpImage : siteData . ogpImage ,
    ogType : 'article' ,
    fbAppId : siteData . fbAppId ,
    fbAdmins : siteData . fbAdmins ,
    twitterCard : siteData . twitterCard ,
    twitterSite : siteData . twitterSite ,
  } ,
} ;

핸들 바를 배우십시오

Sass (Dart Sass)

Sass로 스타일 시트를 논리적으로 관리 할 수 ​​있습니다. 나는 이미 일부 기능과 믹스 인을 정의했습니다. 프로젝트를 시작하기 전에이 파일을 확인하십시오.

• src/scss/foundation/functions/*.scss
• src/scss/foundation/mixins/*.scss

Sass를 배우십시오

CSS 아키텍처

이 스타터 템플릿은 CSS 아키텍처를 표준적으로 견뎌내는 CSS 아키텍처를 제공하지만 모든 프로젝트에서 필요한 아키텍처는 아닙니다. 각 프로젝트에서 최고의 아키텍처를 소개하는 것이 좋습니다.

CSS 아키텍처를 배우십시오

CSS를 지속하는 것은 무엇입니까?

CSS 지속은 대규모, 빠르게 변화하는 오랜 웹 프로젝트를위한 스타일 시트를 작성하는 아키텍처입니다. CSS를 인내하면서 이러한 혜택을 얻을 수 있습니다.

• 고립 된 자체 정분 스타일
• 어떤 크기로든 스케일
• 추상화와 특이성을 피합니다
• 그들 모두를 지배하는 하나의 핵심 선택기
• 취급 상태

지속적인 CSS를 배우십시오

지속적인 CSS 선택기를 쓰는 방법

예제 선택기는 다음과 같습니다.

 .namespace-Component_ChildNode

TypeScript

이 템플릿은 TypeScript를 지원합니다. TS 파일을 쉽게 가져 오기 쉽습니다. 언제든지 tsconfig.json 사용하여 TypeScript 옵션을 사용자 정의 할 수 있습니다.

이미 일부 유틸리티 기능을 정의했습니다. 프로젝트를 시작하기 전에이 파일을 확인하십시오.

src/ts/utils/*.ts

postInstall 명령을 사용하면이 프로젝트에 타이핑을 설치하는 데 도움이됩니다.

Jest는이 프로젝트에 내장되어 있습니다. 명령 줄에서 농담을 실행할 수 있습니다.

LEART Script Learn Jest

아이콘

Vite-Plugin-SVG-ICON은 SVG 아이콘을 쉽게 관리 할 수 ​​있습니다.

아이콘 폴더에 SVG 파일을 추가하십시오.

 src/icons/

SVG 스프라이트 사용

ID로 아이콘을 호출하십시오.

 < svg aria-hidden =" true " >
  < use href =" #icon-file " />
</ svg > 

PWA

Vite Plugin PWA는 웹 사이트를 더 빠르게 만드는 것을 지원합니다. pwa에 대한 설정을 사용자 정의하려면 vite.config.ts 편집. Favicon 생성기로 PWA의 아이콘을 생성 할 수 있습니다.

참고 : PWA의 일부 자산 파일을 프로젝트 파일로 바꾸십시오.

PWA를 배우십시오

Github 동작

프로젝트에서 GitHub를 사용하는 경우 GitHub 작업을 활용하여 개발 워크 플로우를 자동화 할 수 있습니다. 프로젝트를 시작하기 전에이 파일을 확인하십시오.

.github/workflows/project-ci.yml

구성

• package.json
• .EditorConfig
• .Prettierrc
• .eslintrc.json
• .htmlValidate.json
• .postcssrc.json
• .stylelintrc.json
• .node-Version
• .TextLintrc
• vite.config.ts
• tsconfig.json
• Jest.config.ts

추천 IDE

• 비주얼 스튜디오 코드

메모

이 스타터 템플릿은 인터넷 익스플로러를 지원하지 않습니다. 이 템플릿을 자유롭게 사용하십시오.

기여합니다

풀 요청은 항상 환영합니다.

특허

MIT