[Vue.js] Vite를 이용하여 프로젝트 생성하기

앞선 글에서 Vue-cli로 프로젝트를 생성해보았다.

본격적으로 document를 톺아보기 앞서 Quick Start 섹션을 보다가 한 문구를 발견해버렸다.

The official Vue build setup is based on Vite, a frontend build tool that is modern, lightweight and extremely fast.

 

Vue-cli로 실컷 했더니 official이 따로 있었다...ㅎ

 

Vite를 이용하여 다시 프로젝트를 생성해보자.

Vite로 프로젝트를 생성하기 위해선 Node.js가 설치되어있어야 한다.

나는 개발환경 설정할 때 Node.js를 설치했기 때문에 설치 과정을 건너뛰고 VS Code의 command를 켜본다.

 

Vite를 이용하여 Vue project를 생성하기 위해선 아래의 명령어를 입력해줘야 한다.

npm init vue@latest

명령어를 실행하기 앞서 Vue project의 공식 스캐폴딩 도구인 create-vue를 설치해준다.

vue@latest

create-vue의 설치가 완료되면 TypeScript 및 테스트 지원과 같은 여러 선택적 기능 포함 여부에 대한 프롬프트가 표시된다. 나는 우선 아무것도 추가하지 않는 default project로 생성.

vue@latest

아래 세개의 명령어를 실행하여 생성한 project 폴더로 이동하고 node modules를 설치한 후 로컬에서 실행해보자.

cd <project-name>
npm install
npm run dev

npm run dev

Vite App

깔끔하게 실행된 Vite + Vue 3 app.

Vue-cli를 이용하여 프로젝트를 생성하였을 때는 시간이 그렇게 오래 걸렸는데 Vite를 이용하니 너무 빠르게 생성되었다.

이게 공식의 힘이라는 것일까..?

 

만약 작업한 프로젝트를 배포하고 싶다면 아래의 명령어를 입력해주면 된다.

npm run build

npm run build

명령어가 수행되고 난 후 프로젝트 폴더 하위 dist 폴더에 빌드 파일들이 생성된 것을 확인할 수 있다.

/dist

 

---

Vue-cli를 이용하여 생성한 프로젝트와 Vite를 이용하여 생성한 프로젝트의 구조에는 어떤 차이가 있을까?​

Vue-cli vs. Vite

기본적인 골격은 비슷하지만 몇 가지 차이점이 있다.

차이점	Vue-cli	Vite
index.html 파일의 위치	/public/index.html	/index.html
base.css 생성 여부	X	O
.vue 파일의 구조	<template></template> <script></script> <style></style>	<script></script> <template></template> <style></style>
babel.config.js 생성 여부	O	X
jsconfig.json 생성 여부	O	X
vue.config.js 생성 여부	O	X
vite.config.js 생성 여부	X	O

Vue document에서도 Vite를 official로 칭하고 있기 때문에 프로젝트를 생성할 때 가급적 Vite를 이용해보도록 하자.

 

끝으로 만약 컴퓨터에 별도의 프로젝트 파일을 설치하지 않고 개발해보고 싶다면 StackBlitz를 이용해보자. StackBlitz는 브라우저에서 Vite 기반 빌드 설정을 직접 실행하므로 컴퓨터에 아무것도 설치할 필요가 없다.

 

 

참고자료

https://vuejs.org/guide/quick-start.html