[가이드] Vue CLI 사용

설치

npm install -g @vue/cli  # vue-cli 3.x
npm i -g vue-cli. # vue-cli 2.x

yarn global add @vue/cli

버전 확인

vue --version

업그레이드

npm undate -g @vue/cli
yarn global upgrade --latest @vue/cli

새 프로젝트 생성

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-cil 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 - 필요 X

vue-cli 2.x - 필요 O

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