[Vue3] Vite로 Vue 시작하기

Vite란?

// gpt왈
Vue.js의 창시자 인 에반 유(Evan You)가 개발한 Vite는 Vue.js를 위한 최신 빌드 도구입니다. Vite는 "Very Fast"와 "Dev Server"의 약어로, 프로젝트를 개발하는 동안 매우 빠른 개발 경험을 제공하는 것을 목표로 합니다.
Vite는 Vue 3와 함께 사용되는 주요 개발 도구 중 하나로, 빠른 개발 및 빌드 시간, 실시간 모듈 교체 기능 등을 제공합니다. Vite는 기본적으로 ES 모듈을 사용하여 빌드를 하기 때문에, 개발 시간이 단축되고 모듈 간의 의존성을 효율적으로 관리할 수 있습니다.
또한 Vite는 기본적으로 브라우저의 네이티브 ES 모듈 지원을 활용하여 개발 서버와 빌드 프로세스를 가속화합니다. 이로 인해 코드 변경 사항이 발생할 때 신속하게 리로드되며, 개발자는 빠른 반응 속도와 실시간 수정 기능을 경험할 수 있습니다.
Vite는 Vue.js뿐만 아니라 React, Preact 등 다른 프론트엔드 프레임워크와도 함께 사용할 수 있습니다. 그러나 Vue.js와의 통합 및 최적화를 위해 만들어졌으며, 특히 Vue 3와의 사용이 강조되고 있습니다.

• Vite(비트)는 Vue 창시자 Evan You가 만든 새로운 프론트엔드 툴이다.
• 빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구이다.
• 현재 Vue, React, Svelte 등의 주요 프론트엔드 라이브러리, 프레임워크 커뮤니티에서 주목받고 있다.

Vite

Vite 시작하기

1. node.js 설치

Vite 사용하기 전에 node.js를 설치해야 한다.

Node.js — Run JavaScript Everywhere

설치는 알아서 진행해주면 된다.

설치 후 cmd창을 열어서 간단하게 설치 유무를 확인해준다.

node -v

2. Vite 프로젝트 생성

Vite 프로젝트를 npm, yarn 사용해서 생성하는 방법이다.

# NPM
npm create vite@latest
# Yarn
yarn create vite

프로젝트의 이름이나 사용하려는 템플릿을 직접 지정할 수 있다.

# npm 
npm create vite@latest my-vue-app -- --template vue

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

1. Project name : Vite 프로젝트 이름 작성

2. Select a framework : 원하는 프레임워크 선택

3. Select a variant : 언어 선택

4. vite가 시키는대로 해당 프로젝트 폴더로 이동 (cd test-project) npm install → npm run dev를 실행하면 프로젝트가 실행된다.

실행 화면