Vite + Vue3 프로젝트 처음부터 세팅하는 법 (2025)

1. Vite가 뭔지 한 줄 요약
프론트엔드 개발을 빠르게 실행하고 빌드해주는 도구. Webpack보다 훨씬 빠르다.

2. 왜 Vite를 쓰나
• Webpack은 프로젝트 커질수록 느려짐
• Vite는 ES Module 기반이라 개발 서버 시작이 빠름
• Vue3랑 궁합이 좋음

3. 프로젝트 세팅

npm create vite@latest my-project
cd my-project
npm install
npm run dev

4. 폴더 구조

my-project/
├── src/
│   ├── components/
│   ├── App.vue
│   └── main.js
├── index.html
└── vite.config.js

5. 마무리
Vue3 쓰려고 Vite 선택했는데 Vue3 소형 프로젝트라면 Vite 세팅이 적합한 것 같다.