vitesse

Vitesse는 Anthony Fu가 만든 Vite와 Vue 3로 웹 애플리케이션을 구축하기 위한 고도로 의견이 반영된 스타터 템플릿입니다. 이 템플릿은 개발자가 구성에 시간을 쓰지 않고 아이디어를 빠르게 작동하는 앱으로 전환할 수 있도록 빠르고 사전 구성된 설정을 제공하는 것을 목표로 합니다. 속도에 중점을 두고 pnpm, esbuild, Vite와 같은 현대적인 도구를 활용하며, 기본 제공되는 큐레이션된 기능과 플러그인 세트를 포함합니다. **주요 기능** - **Vue 3 + Vite**: 빠른 개발 및 빌드 시간을 위해 최신 Vue 3와 Vite 기반. - **파일 기반 라우팅**: `unplugin-vue-router`를 사용하여 `src/pages` 디렉토리에서 자동으로 경로 생성. - **자동 임포트**: 컴포넌트, API(예: Composition API), 아이콘이 자동으로 임포트되어 보일러플레이트 감소. - **상태 관리**: 직관적이고 타입 안전한 상태 관리를 위한 Pinia. - **레이아웃 시스템**: `vite-plugin-vue-layouts`를 통한 다중 레이아웃 지원. - **PWA 지원**: 프로그레시브 웹 앱 기능을 위한 `vite-plugin-pwa` 통합. - **스타일링**: UnoCSS로 주문형 원자 CSS를 즉시 제공하며, Iconify를 통해 모든 아이콘 세트 지원. - **국제화**: 다국어 지원을 위한 Vue I18n 및 `unplugin-vue-i18n`. - **마크다운**: Shiki 구문 강조와 함께 `unplugin-vue-markdown`을 사용하여 마크다운을 Vue 컴포넌트로 작성. - **SSG**: `vite-ssg`를 통한 정적 사이트 생성, `beasties`를 사용한 중요 CSS 최적화. - **테스트**: 단위 테스트용 Vitest 및 E2E 테스트용 Cypress, GitHub Actions와 통합. - **TypeScript**: 전체 TypeScript 지원. - **배포**: Netlify에 대한 제로 구성 배포, 프로덕션 빌드를 위한 Docker 지원. **사전 패키지 플러그인** - Vue Router, Pinia, VueUse, 헤드 관리를 위한 Unhead, 향상된 개발자 경험을 위한 `vite-plugin-vue-devtools`. - `@antfu/eslint-config`(단일 따옴표, 세미콜론 없음)를 사용한 ESLint로 코딩 스타일 적용. - Vite, Volar, Iconify IntelliSense, i18n Ally, ESLint용 VS Code 확장 권장. **변형** 이 템플릿은 여러 커뮤니티 유지 관리 변형에 영감을 주었습니다: - `vitesse-lite`: 경량 버전. - `vitesse-nuxt3`: Nuxt 3용. - `vitesse-webext`: 브라우저 확장용. - `vitesse-ssr-template`: SSR 지원 포함. - `vitailse`: TailwindCSS 포함. - `vitesse-h5`: 모바일 앱용. - `vitesse-solid`: SolidJS용. **사용법** - **개발**: `pnpm dev` 실행 후 `http://localhost:3333` 방문. - **빌드**: `pnpm build` 실행하여 `dist` 폴더 생성. - **배포**: 저장소를 연결하여 Netlify에 배포하거나, `docker buildx build . -t vitesse:latest`로 Docker를 사용하고 `docker run --rm -it -p 8080:80 vitesse:latest`로 실행. **참고**: 저자는 더 나은 Vue 개발자 경험과 일관된 유지 관리를 위해 새 프로젝트에는 Nuxt를 권장합니다. Vitesse는 초기 Vite/Vue 3 전환 시기의 것이며 업데이트가 느릴 수 있기 때문입니다. 그러나 학습과 의견이 반영된 설정에 부합하는 프로젝트에는 여전히 훌륭한 참고 자료입니다. **사용자 지정 체크리스트** 템플릿을 사용할 때 `LICENSE`의 작성자 이름, `App.vue`의 제목, `vite.config.ts`의 호스트 이름, `public`의 파비콘을 업데이트하고, `.github` 폴더를 제거하고, README와 경로를 정리하세요. 전반적으로 Vitesse는 속도와 개발자 경험에 중점을 두고 Vue 3 앱을 위한 포괄적이고 의견이 반영된 설정을 원하는 개발자에게 강력하고 기능이 풍부한 스타터입니다.