자바스크립트 개발자 포럼원본 글은 여기에 있습니다 
주의
이 글은 Vue.js 커맨드라인 인터페이스 3.0 버전을 다룹니다.
2018년 01월 28일 현재 alpha 4 버전이므로 사용시 오류가 있을 수 있습니다.
Vue CLI의 목적
최근 공개된 Vue CLI 3.0 알파버전은 이 Kickoff: 3.0 plans 이슈를 기반으로 만들어지고 있습니다.
3.0 버전의 목표는 두가지 문제점을 해결하는 것 입니다.
- 템플릿에 빌드 설정이 포함되므로 아래 문제가 있습니다.
- 한번 만들어지면 프로젝트의 템플릿 및 의존성을 업그레이드 하기 어려움
- github에서 직접 가져오는 방식은 npm 패키지 버전 관리에 취약함
- 빌드 설정이 복잡하여 경험이 적은 사용자에게 부담을 줌
- 너무 많은 선택을 강요합니다.
- 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 설정
- 저장할 때 lint
- 커밋할 때 lint lint-staged
- 유닛 테스팅 도구
- 엔드 투 엔드 테스팅 도구
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 또는 글쓴이에게 알려주세요
감사합니다.