간단하게 vite 사용해보기

1. vite란?

비트(vite)는 하나의 프론트엔드 도구입니다.

이 도구는 웹팩보다 좀 더 빠르게 개발하고, 배포할 수 있도록 도와줍니다.

좀 더 고급지게 설명하자면

별다른 번들 생성없이 ES 모듈을 바로 웹 브라우저에 렌더링 할 수 있도록 만든 개발 툴

 

vite에 대한 무슨 역사, 기타 설명들은 수 많은 블로그에 잘 정리되어있으니

우린 빠르게 사용법만 알아보자!

 

2. 사용해보기

STEP.01

구글에 vite 검색 후 접속!

이 문구를 찾습니다.

 

STEP.02

본인에게 맞는 명령어를 터미널에 입력합니다!

 

yarn create vite 생성할 프로젝트 폴더 명 --template 사용할 언어

npm create vite@latest 생성할 프로젝트 폴더 명 -- --template 사용할 언어

 

# npm 6.x
npm create vite@latest my-vue-app --template vue

# npm 7+, '--'를 반드시 붙여주세요
npm create vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

# pnpm
pnpm create vite my-vue-app --template vue

/* 사용할 언어
vanilla, vanilla-ts, 
vue, vue-ts, react, 
react-ts, react-swc, 
react-swc-ts, preact, 
preact-ts, lit, lit-ts, 
svelte, svelte-ts.
*/

 

STEP.03

완료가 되면 Done. Now run: 하고 아래 3-line 의 문구가 나오는데,

그걸 그대로 복사하여 터미널에 입력한다.

 

STEP.04

그럼 이렇게 로컬 호스트 번호와 함께

완료!

 

STEP.05

로컬호스트를 복사하여 이동해보자!

잘 나오는 것을 확인할 수 있다.

 

 

End.