[Vite] Vite 설치 및 프로젝트 생성

Vite를 사용하여 Vue.js 프로젝트를 생성하고 개발하기 위해 필요한 설치와 프로젝트 생성 방법을 소개합니다.

---

Node.js와 npm 설치

Vite를 사용하려면 먼저 Node.js와 npm(Node Package Manager)를 설치해야 합니다. Node.js는 Vite를 실행하고 프로젝트를 관리하는 데 필요한 런타임 환경이며, npm은 Node.js 패키지를 설치하고 관리하는데 사용됩니다.

1. Node.js 공식 웹사이트에서 LTS 버전(Node.js 14 이상)을 다운로드하고 설치합니다.
2. 설치가 완료되면 터미널(또는 명령 프롬프트)에서 다음 명령어를 입력하여 Node.js와 npm이 정상적으로 설치되었는지 확인합니다.

node -v
npm -v

위 명령어를 입력하고 각각의 버전이 출력되면 설치가 성공적으로 완료된 것입니다.

---

Vite CLI 설치

Vite CLI는 Vite로 프로젝트를 생성하기 위해 사용되는 명령 줄 도구입니다. 다음 명령어를 실행하여 Vite CLI를 전역으로 설치합니다.

npm install -g create-vite

전역 설치를 위해 -g 옵션을 사용했습니다. 이제 Vite CLI가 설치되었습니다.

---

Vite로 Vue.js 프로젝트 생성

이제 Vite CLI를 사용하여 새로운 Vue.js 프로젝트를 생성합니다.

 

1. 원하는 디렉토리에 새로운 폴더를 만들고 해당 폴더로 이동합니다.

mkdir my-vue-app
cd my-vue-app

위 명령어에서 my-vue-app은 프로젝트 폴더 이름으로 원하는 이름으로 변경할 수 있습니다.

2. 다음 명령어를 실행하여 Vite로 Vue.js 프로젝트를 생성합니다.

create-vite

명령어를 실행하면 프로젝트 템플릿을 선택하라는 메뉴가 나타납니다. Vue 3를 사용하려면 vue-ts 또는 vue 템플릿을 선택합니다.

3. 프로젝트 템플릿을 선택한 후, 필요한 정보를 입력하면 Vite가 Vue.js 프로젝트를 생성합니다.

---

프로젝트 실행

프로젝트가 성공적으로 생성되면 해당 프로젝트 폴더로 이동합니다. 그리고 다음 명령어를 실행하여 개발 서버를 실행합니다.

npm run dev

Vite 개발 서버가 실행되면 기본적으로 localhost:3000에서 앱을 확인할 수 있습니다. 개발 서버는 코드 변경 시에 자동으로 새로 고침되므로 실시간으로 수정 사항을 확인할 수 있습니다.

이제 Vite를 사용하여 Vue.js 프로젝트를 생성하고 개발할 준비가 완료되었습니다. 새로운 프로젝트를 시작하거나 기존 프로젝트의 빌드 도구를 교체하는데 Vite를 활용해보세요!