Front-end/Vue.js

Vite 기반 Vue 시작하기. Vue 프로젝트 만들기

luana_eun 2025. 11. 24. 10:45
728x90

앞서 vue 프로젝트를 cli없이 시작하기 라는 글을 쓴 적이 있는데, 

이 프로젝트는 webpack를 사용한 것이고, 요즘에는 webpack 대신 vite를 점점 사용하고 있다고 한다. 

vue3 에서도 vite를 권장하고 있긴하다. 

 

그래서 이번에는 vite 기반으로 vue 프로젝트를 만들어보려고 한다. 

 

 

 

1. 터미널 입력

npm init vue@latest

 

설치할때 입력해야하는 것들이 있는데

1) 프레임워크 선택 : Vue, React 등등

2) 프로젝트 이름 : 생성될 폴더명

3) 패키지 이름 : package.json 에 명시될 패키지명

4) 프로젝트에 포함시킬 라이브러리 : router, pinia, typescript, 등등

    방향키로 위아래 이동하면서 스페이스바를 눌러 설치하고 싶은 것만 선택하면된다. 

5) 프로젝트에 포함시킬 기타(?) 라이브러리

    뭐가 있었는지 잘 기억안나는데 css를 돕는 무언가랑 코드교정해주는 그런게 있었던거같다. 

    나는 필요없어서 패스

6) 기타 설정하면 설치가 완료된다. 

 

 

최초 폴더

 

 

 

 

 

2. npm install

 

npm 을 다운받고 나면 node_modules 폴더가 생성된다

 

 

 

 

 

3. 실행

npm run dev 를 하면 DevTool 주소가 나오고 들어가면 vue 프로젝트가 시작됐음을 알 수 있다.

* powershell이 아닌 일반 cmd에서 해야한다

 

 

 

728x90