Vue 프로젝트 만들기 npm init vue

Vue 프로젝트 세팅 하고 실행하는 방법입니다.

 

설치에 앞서 Node.js를 16 버전 이상으로 설치해야 합니다.

아래 사이트에서 설치하시면 됩니다.

https://nodejs.org/ko

Node.js

 

 Vue 프로젝트 만들기

npm init vue

create-vue 패키지가 설치가 안되어있으면 아래 버전을 설치하겠냐고 물어봅니다.

y를 입력하고 엔터를 입력합니다.

PS C:\Users\power\WebstormProjects> npm init vue

Vue.js - The Progressive JavaScript Framework

√ Project name: ... my-first-vue
√ Add TypeScript? ... No / Yes
√ Add JSX Support? ... No / Yes
√ Add Vue Router for Single Page Application development? ... No / Yes
√ Add Pinia for state management? ... No / Yes
√ Add Vitest for Unit Testing? ... No / Yes
√ Add an End-to-End Testing Solution? » No
√ Add ESLint for code quality? ... No / Yes

Scaffolding project in C:\Users\power\WebstormProjects\my-first-vue...

Done. Now run:

프로젝트 이름은 my-first-vue로 하였습니다.

 

프로젝트이름, 타입스크립트 사용, 기타 등등 환경설정 여부를 물어보는데

일단 No로 선택 후 엔터키를 입력합니다.

 

완료가 되면 해당 폴더에 vue 프로젝트 관련 파일들이 생성되었습니다.

완료 이후 아래 명령어를 순차적으로 입력합니다.

cd my-first-vue
npm install
npm run dev

 

npm run dev 실행 시에

아래와 같이 로컬 서버가 열리게 됩니다. 로컬 주소를 클릭하거나 브라우저를 통해서 접속하시면 됩니다.

  VITE v4.2.1  ready in 648 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help​

 

프로젝트 세팅이 완료되었습니다.