Vite는 빠른 시작 시간, 핫 모듈 교체 (HMR) 및 강력한 플러그인 지원으로 개발자 경험을 향상 시키도록 설계된 최신의 빠른 빌드 도구입니다. 새로운 개발자에게 Vite를 Learning의 경우 기본 설정부터 고급 기능에 이르기까지 모든 것을 다루는 자세한 자습서와 리소스가 많이 있습니다. 다음은 Vite를위한 학습 리소스 및 튜토리얼에 대한 포괄적 인 개요이며 새로운 개발자에게 유용합니다.
***
공식 Vite 문서 및 가이드
Vite 공식 웹 사이트는 새로운 개발자에게 강력한 출발점을 제공합니다. 가이드는 설치, 기본 사용, 구성 및 인기있는 프레임 워크와의 통합을 통해 걸어갑니다. 개발 서버 스타트 업, 핫 모듈 교체, 생산을위한 빌드, 환경 변수, 정적 자산 처리 및 플러그인 사용과 같은 핵심 개념을 설명합니다. 문서는 자주 업데이트되며 기본 및 고급 구성에 대한 신뢰할 수있는 참조 역할을합니다.
***
비디오 코스 및 튜토리얼
** Frontend Masters- 학습 Vite 코스
업계 전문가가 이끄는 Frontend Masters의 자세한 비디오 과정은 Vite를 포괄적으로 다룹니다. 설치 및 설정, 모듈 가져 오기, 동적 가져 오기 및 코드 분할, CSS 및 CSS 모듈 스타일링, 이미지 처리, 환경 변수, JSON 처리 및 플러그인 개발과 같은 실제 주제로 시작합니다. 이 과정에는 학습을 강화하는 연습이 포함되어 있으며 플러그인 빌딩 및 빌드 최적화와 같은 실제 사용을 다룹니다.
주요 하이라이트는 다음과 같습니다.
- 인스턴트 서버 시작 및 효율적인 핫 모듈 교체
- React, Vue 및 Svelte와 같은 프레임 워크와 통합
- 코드 분할 및 동적 가져 오기
- Vite 플러그인을 만들고 사용하는 방법
- 빌드 최적화 기술
***
** YouTube 충돌 과정
YouTube에는 Vite를 신속하게 시작하는 데 중점을 둔 여러 초보자 친화적 인 충돌 코스가 있습니다. 이들은 일반적으로 다음과 같습니다.
- CLI를 사용하여 새로운 Vite 프로젝트 설정
- 빠른 개발 서버 시작 및 라이브 재 장전
- 구성에 환경 변수를 사용하는 방법
- 이미지 및 글꼴과 같은 정적 자산을 처리합니다
- 플러그인으로 Vite를 구성하고 확장합니다
- 생산 준비 묶음 구축
이 비디오는 시각적 맥락 및 코드 데모를 제공하여 실습 학습을 선호하는 개발자에게 적합합니다.
***
기사 및 서면 안내서
** vite.js에 대한 더 나은 스택 초보자 안내서
이 기사는 Blazing-Fast Start, 핫 모듈 교체 및 Vue 및 React와 같은 프레임 워크와의 원활한 통합과 같은 Vite의 핵심 장점을 강조합니다. 여기에는 새로운 Vite 프로젝트 설정, CLI 옵션 설명, 프로젝트 스캐 폴딩 및 개발 서버 시작을위한 단계별 지침이 포함됩니다. 이 안내서는 또한 Vite의 기본 ES 모듈, 내장 플러그인 시스템 및 롤업 기반 프로덕션 빌드 사용의 이점에 대해 설명합니다.
주요 학습 지점 :
- Vite의 아키텍처 이해 및 전통적인 번들과 어떻게 다른지
- 바닐라 JavaScript 또는 프레임 워크 기반 프로젝트 설정
- 종속성 프리 묶음을 위해 esbuild 사용
- 전체 앱 재건을 기다리지 않고 개발 서버를 즉시 실행합니다.
- 프로덕션 빌드를위한 vite 구성을 사용자 정의합니다
***
** VUE 개발자를위한 VITE에 대한 Vue School의 소개
VUE CLI에 익숙 할 수있는 VUE 개발자를 대상으로하는이 리소스는 VITE가 VUE 3 프로젝트에 새로운 권장 도구 인 이유를 설명합니다. 여기에는 Vite로 새로운 VUE 프로젝트를 초기화하는 방법, VUE CLI의 차이 및 Vite가 더 빠른 빌드 및 기본 ES 모듈로 개발자 경험을 향상시키는 방법이 포함됩니다. 코스는 다음과 같습니다.
-`npm init vite@최신@스캐 폴드 프로젝트와 같은 CLI 옵션
-VUE의 단일 파일 구성 요소 (SFC)와 Vite 사용
- Vite 프로젝트에서 CSS 및 자산을 처리합니다
- 환경 변수 디버깅 및 구성
***
튜토리얼 및 리소스에 걸쳐 다루는 주요 주제
- 프로젝트 설정 및 초기화 :`npm 사용 vite@theStript, react, vue 또는 svelte와 같은 JavaScript 및 Framework 사전 설정을 선택하여 vite@toices`를 스캐 폴드 프로젝트로 만들어냅니다.
- 개발 서버 및 핫 모듈 교체 (HMR) : 전체 페이지 재 장전없이 모듈을 업데이트하는 Vite의 초고속 서버 시작 및 효율적인 핫로드 이해를 이해합니다.
- 모듈 가져 오기 및 코드 분할 : 기본 ES 모듈이 가져 오기에 사용되는 방법 및 동적 가져 오기 코드로의 동적 가져 오기 연습에는 주문시 자바 스크립트 청크를 동적으로로드하는 것이 포함됩니다.
- 스타일링 : 스코프 스타일, 전처리기 및 이미지 및 글꼴과 같은 자산 처리에 CSS 모듈을 사용하여 CSS 가져 오기.
- 환경 변수 :`.env` 파일을 사용하여 다른 개발자 및 생산 환경 관리`import.meta.env`를 통해 변수에 액세스합니다.
- 플러그인 및 확장 가능성 : 기존 Vite 플러그인을 사용하고 맞춤형 플러그인을 작성하여 빌드 및 개발 단계에서 파일을 변환하거나 기능을 확장하는 방법. 예로는 마크 다운 변환 및 라인이 포함됩니다.
- 생산을위한 빌딩 : 롤업, 트리 흔들림, 미니 화 및 번들 분석을 통한 최적화.
- 테스트 및 디버깅 : 테스트 프레임 워크와의 통합 및 핫 재 장전 문제 디버깅.
***
커뮤니티 및 오픈 소스 리소스
-Github의 멋진 vite : 학습 및 개발을 풍부하게 할 수있는 템플릿, 플러그인, 가이드 및 vite에 연결된 도구의 선별 된 목록.
- 블로그 게시물 및 튜토리얼 : 많은 개발자가 Vite가 Micro-Frontends 및 Module Federation과 같은 다양한 스택 또는 고급 주제와 어떻게 통합 될 수 있는지를 문서화하는 블로그 게시물을 통해 경험과 팁을 공유합니다.
***
요약
새로운 개발자는 Vite를 Learning Vite를 다음과 같은 광범위한 튜토리얼과 리소스를 활용할 수 있습니다.
- 기본 지식을위한 공식 Vite 문서 및 가이드.
- 프론트 엔드 마스터스 코스와 같은 종합적인 비디오 과정은 실용적인 사용 및 고급 기능에 깊이 들어가는 것입니다.
-빠른 실습 학습을위한 초보자 친화적 인 YouTube 충돌 과정.
- 설정, 개발 워크 플로 및 고급 사용자 정의를 다루는 Better Stack 및 Vue School의 초보자 지향 기사 및 가이드.
- 템플릿, 플러그인 및 Vite의 기능을 확장하기위한 팁을 제공하는 커뮤니티 차별 리소스.