[가이드] Vue CLI 사용하기

Vue CLI 시작하기

설치

$ npm install -g @vue/cli    // vue-cil 3.x
$ npm i -g vue-cli             //  vue-cil 2.x
$ yarn global add @vue/cli

 

버전 확인

$ vue --version

 

업그레이드

$ npm update -g @vue/cli 
$ yarn global upgrade --latest @vue/cli

 

새 프로젝트 생성

프로젝트를 생성할때 2.x 버전에서는 eslint, unit test, night watch 등등 낯선것들에 대해 선택을 해야만 했는데, 3.x 에서는 default (babel, eslint) 를 선택하면 가장 기본적인 설정으로 프로젝트가 생성됩니다.(나중에 언제든지 옵션을 추가할 수 있습니다.)

$ vue create 프로젝트명  // vue-cli 3.x
$ vue init webpack '프로젝트 명'  // vue-cli 2.X

 

로컬 서버 실행

$ npm run serve  // vue-cli 3.x
$ npm run dev    // vue-cli 2.x

 

 

2.x 템플릿 가져 오기 (레거시)

Vue CLI >= 3은 동일한 vue 바이너리를 사용하므로 Vue CLI 2(vue-cli)를 덮어 씁니다 . 레거시 vue init 기능이 여전히 필요한 경우 글로벌 브리지를 설치할 수 있습니다.

 

$ npm install -g @vue/cli-init
# vue init now works exactly the same as vue-cli@2.x
$ vue init webpack my-project

 

node_modules

 · vue-cli 3.x - vue create를 통한 프로젝트 생성 단계에서 함께 설치됩니다.

 · vue-cli 2.x - 프로젝트 생성 후 npm install을 통해 설치합니다.

 

웹팩 설정 파일

 · vue-cli 3.x : 노출 X

 · vue-cli 2.x : 노출 O

 

2.x에서는 webpack.config.js 파일이 루트 디렉토리에 있습니다. 3.x에서는 없기 때문에 설정을 추가하기 위해서는 루트 디렉토리에 vue.config.js 파일을 설정하고 내용을 작성해줍니다.

 

vue.config.js : 

module.exports = {
  // 여기에 옵션을 작성해준다.
}

 

프로젝트 구성

 · vue-cli 3.x 플러그인 기반으로 기능 추가

 · vue-cli 2.x github의 템플릿 다운로드

 

2.x 에서는 simple, webpack, webpack-simple, pwa 등 템플릿 리스트 중 하나를 선택해서 프로젝트를 구성했다면,

3.x 에서는 프로젝트에 플러그인 기반으로 원하는 설정 추가합니다.

 

ES6 이해도

 · vue-cli 3.x : 필요 O

 · vue-cli 2.x : 필요 X

 

3.x 에서는 ES6 기본 문법 뿐만아니라 축약 문법 또한 알고 있어야 합니다.

 

 

 

컴포넌트 구성

•  template : html부분이다. 이 안에 style태그와 script태그를 사용할 수 없다.
•  script : 이 템플릿에서 사용할 스크립트 코드이다. import로 외부라이브러리를 가져올 수 있다.
•  style : 이 템플릿에서 사용할 css이다. scoped속성을 부여하면 딱 이 스타일에서만 사용할 수 있다. 아무것도 없으면 자식 컴포넌트도 일괄 적용된다.