Vite 로 vue 3 프로젝트 시작하기

🟡 Vite란?

Vite는 _차세대 프론트엔드 개발 환경_을 제공하는 빌드 도구입니다. 빠른 개발 서버, 빠른 빌드 속도, 모듈 핫 리로딩(HMR)을 지원합니다.

 

🔄 Vite vs Vue CLI 비교

항목                                                            Vue CLI                                               Vite

 

개발 서버 시작 속도	느림	매우 빠름 ⚡
번들링 도구	Webpack 기반	ESBuild (개발) + Rollup (배포)
설정 파일	무겁고 복잡할 수 있음	가볍고 단순함
Hot Module Reload (HMR)	있음, 다소 느릴 수 있음	빠르고 자연스러움
기본 사용되는 기술	Webpack	ESBuild / Rollup

📦 Vite의 장점 요약

• ⚡ 빠른 개발 서버 부팅 속도
• 🧠 최신 브라우저 기능 활용 (ES Modules)
• 🔧 설정이 단순하고 쉽게 확장 가능
• 💨 Hot Reload 속도가 매우 빠름

---

✅ 언제 Vite를 쓰면 좋을까?

• Vue 3, React, Svelte, Lit 같은 모던 프레임워크를 쓸 때
• 빠른 개발 속도와 간결한 설정을 원할 때
• 무겁고 느린 Webpack 기반 환경에 지쳤을 때

🛠️ Vite로 Vue 3 프로젝트 시작하기

 

Vite 공식 템플릿 생성기

# Vite 프로젝트 템플릿으로 시작
npm create vite@latest my-vue-app

# 질문에 따라 선택: Vue > JavaScript or TypeScript
cd my-vue-app
npm install
npm run dev

프로젝트  생성 - npm create vite@latest my-vue-app

프로젝트 디렉토리로 이동 cd my-vue-app

의존성 설치  npm install

개발 서버 실행 npm run dev

 

 

 

Select a framework:  -> Vue 선택

Select a variant 

 

JavaScript	평범하게 Vue 3를 JS로 쓰고 싶을 때 (쉬움)
TypeScript	정적 타입을 쓰고 싶고, 대규모 프로젝트나 타입 안정성이 중요할 때

 

 

🎯 예: Vue 3 + JavaScript로 시작하려면

npm create vite@latest my-vue-app
# 프롬프트에 따라 다음 선택:
# ✔ Select a framework: → Vue
# ✔ Select a variant:   → JavaScript
cd my-vue-app
npm install
npm run dev

 

Local 주소를 ctrl + 클릭하면 Vue 앱이 실행돼요!