Vue CLI 3.0 사용하기

주의 이 글은 Vue.js 커맨드라인 인터페이스 3.0 버전을 다룹니다. 2018년 01월 28일 현재 alpha 4 버전이므로 사용시 오류가 있을 수 있습니다.

Vue CLI의 목적

최근 공개된 Vue CLI 3.0 알파버전은 이 Kickoff: 3.0 plans 이슈를 기반으로 만들어지고 있습니다.

3.0 버전의 목표는 두가지 문제점을 해결하는 것 입니다.

1. 템플릿에 빌드 설정이 포함되므로 아래 문제가 있습니다.
   • 한번 만들어지면 프로젝트의 템플릿 및 의존성을 업그레이드 하기 어려움
   • github에서 직접 가져오는 방식은 npm 패키지 버전 관리에 취약함
   • 빌드 설정이 복잡하여 경험이 적은 사용자에게 부담을 줌
2. 너무 많은 선택을 강요합니다.
   • Vue.js 프로젝트를 위해 템플릿을 선택하는 과정에서 사용자가 어떤 것이 가장 적합한지 알 수 없습니다. webpack 템플릿은 초보자에게 부담을 주는 linter 또는 테스팅 도구를 제시합니다.

Vue CLI 3.0 버전 코드는 vue-cli의 dev branch에 있습니다.

설치

공식 README.md 에는 npm과 yarn을 모두 지원한다고 적혀있습니다. npm 으로 설치한 Vue CLI 로 프로젝트를 만들더라도 yarn을 요구하므로 yarn이 미리 설치되어있어야 합니다.

yarn 설치

npm install -g yarn

vue-cli 3.0 alpha.x 설치

npm install -g @vue/cli
# 또는
yarn global add @vue/cli

Vue CLI 3.0을 이용한 프로젝트 시작하기

vue create my-project

위 명령어로 프로젝트를 만들면 두가지 선택지를 제공합니다. 기본값으로 프로젝트를 만드는 방법과 사용자 정의하여 프로젝트를 만들 수 있습니다.

기본 npm 저장소에 연결되는 속도가 느리거나 사용이 불가능한 경우(중국과 같이 인터넷이 통제된 상태) 에는 https://registry.npm.taobao.org로 npm 저장소를 대체합니다.

기본값으로 프로젝트 만들기

Vue CLI의 기본 템플릿은 babel, eslint, unit-mocha 를 포함합니다.

사용자 정의 설정

사용자 정의 설정은 아래의 설정을 포함합니다. 한번 선택한 설정은 다음에도 사용할 수 있도록 저장할 수 있습니다.

• 타입스크립트 지원
• 프로그레시브 웹 앱 (PWA) 지원
• Vue Router
• Vuex
• CSS 프리프로세서 (SCSS/SASS, LESS, Stylus)
• ESLint 와 Code Formatter
  • 에러를 일으키는 코드만 lint
  • ESLint + Airbnb
  • ESLint + Standard
  • ESLint + Prettier
• 추가 lint 설정
  • 저장할 때 lint
  • 커밋할 때 lint lint-staged
• 유닛 테스팅 도구
  • Mocha + Chai
  • Jest
• 엔드 투 엔드 테스팅 도구
  • Cypress
  • Nightwatch

vue-cli 2버전과 비교

vue-cli 2버전은 템플릿을 사용자가 직접 지정해서 프로젝트를 만들어야 합니다. 3버전은 이 과정이 생략됩니다. 그러나 3 버전에서도 2버전대의 템플릿으로 만들 수도 있습니다.

# vue-cli 2.x
vue init webpack my-project
# vue-cli 3.x
vue create my-project

Vue CLI 3를 이용해 Vue CLI 2버전의 템플릿을 사용하려면 @vue/cli-init 을 설치해야합니다.

yarn global add @vue/cli-init
# 이제 vue init 명령어를 사용할 수 있습니다.
vue init webpack my-project

디렉터리 구조

- dist         # 빌드 결과물, yarn build 전까지 없음
- node_modules # yarn 또는 npm으로 설치한 의존성
- public       # 공용으로 접근 가능한 파일이 위치함
- src          # 애플리케이션 소스코드
- test         # 테스트코드
.gitignore
package.json

설정에 따라 다른 파일이 있을 수 있습니다.

package.json

기존의 Vue CLI 템플릿은 각 설정들을 가진 자바스크립트 파일을 노출합니다. 3.0버전의 목표인 사용자에게 설정을 노출함으로 인하여 발생하는 혼란을 줄이기 위해 프로젝트 설정을 packge.json 파일에 담는 것으로 제한합니다.

애플리케이션 설정 목록

• vue
• babel
• eslintConfig
• postcss
• browserlist
• gitHooks
• lint-staged

사용자 정의 설정으로 프로젝트를 만든 경우에는 다르게 나올 수 있습니다.

scripts

가장 많이 사용되는 webpack 템플릿과 변경된 부분이 있습니다 아래 목록을 확인 후 사용하세요.

• serve : 개발용 버전으로 앱을 실행합니다.
• build : 배포용 버전으로 앱을 빌드합니다.
• test : 테스트코드를 실행합니다.
• lint : 코드 스타일을 lint 합니다.

공식문서

아직 공식문서는 없습니다. vue-cli의 README.md 에 추가될 예정입니다.

Vue.js 한국어 사용자 모임 슬랙 또는 페이스북 그리고 이 글의 댓글로 Vue CLI 3를 사용한 경험을 공유해주세요

이 글에 문제가 있는 경우에는 Pull Request 또는 글쓴이에게 알려주세요

감사합니다.