[Age of Vue] Vue.js 시작하기 - 28. Vue CLI

Vue CLI?

명령줄 인터페이스(Command Line Interface). 명령어를 통한 특정 액션을 수행하는 인터페이스 도구. 명령어 보조/실행 도구

---

https://cli.vuejs.org/

Vue CLI

 

터미널(Ctrl + ~)에서 npm을 이용하여 설치

설치 안되면 sudo npm install -g @vue/cli 로 진행

npm install -g @vue/cli

 

 

where does npm install packages?

Windows XP - %USERPROFILE%\AppData\npm\node_modules
Windows 7, 8 and 10 - %USERPROFILE%\AppData\Roaming\npm\node_modules

---

Vue CLI 3.x를 이용한 프로젝트 생성 및 서버 실행

vue init '프로젝트 템플릿 유형' '프로젝트 폴더 위치' (cli 2.x)

1. vue create '프로젝트 폴더 위치' (cli 3.x) 

▷ 현재 해당 인강은 Vue 2 기반이므로, vue 2 기준으로 프로젝트 생성

 

2. cd vue-cli > npm run serve

alt + 링크 click

---

CLI로 생성한 프로젝트 폴더 구조

1. package.json

다양한 라이브러리 정의. npm run serve의 'serve'라는 명령어는 package.json 에 정의되어있음 

 

 

2. index.html

서버가 실행되면 public/index.html가 실행된다.

주석을 읽어보면, 빌드된 파일들이 자동으로 해당 태그에 주입된다고 적혀있다. 

후에 개발을 진행하며 scr에 정의할 여러가지 파일이 모여 하나로 모여 주입되어짐. (webpack 강좌 듣기)

 

 

3. main.js

$mount API는 el 속성과 동일한 역할을 한다.

template 속성을 정의했을때에 내부적으로 render 함수가 실행되어짐 (추후 중급강좌에서 설명)

▷ import된 싱글 컴포넌트 파일인 App.vue을 집어넣고 render를 했다. (까지만 이해하자!)

앞서 공부했던 예제와 동일한 패턴이라고 생각하면 쉽다.