[Vue.js]Vue CLI로 Vue 프로젝트 생성

1. Vue CLI

Vue Command Line Interface

Vue 프로젝트를 빠르게 구성하고 빌드, 배포할 수 있게 도와주는 도구

 

2. Vue CLI 설치

vs code 터미널에 명령어 입력

npm install -g @vue/cli

 

npm install: npm에 등록된 패키지 설치

-g: global. 설치하는 패키지가 현재 디렉토리뿐만 아니라 앞으로 생성하게 되는 모든 프로젝트에서 사용

    --save: 현재 작업 중인 디렉토리 내에 있는 ./node_modules에 패키지 설치

npm install 패키지명 --save

 

 

3. Default 옵션으로 프로젝트 설치

1) Vue 프로젝트 생성

명령어 입력

vue create 프로젝트명

 

preset 선택지 중 Default(Vue 3 Preview) 선택, 엔터

프로젝트 설치 후 터미널에 다음과 같이 나옴

 

 

2) 프로젝트 실행

명령어 입력(프로젝트로 이동 후 실행)

cd 프로젝트명
npm run serve

localhost:8080으로 실행됨

 

다른 포트 사용

npm run serve -- --port 포트번호

 

http://localhost:8080/ 이동시 프로젝트 페이지 보임

 

 

3) 프로젝트 파일 구조

[vue.js] Vue 프로젝트 파일 구조

[vue.js] Vue 프로젝트 파일 구조