vue-cli 는 커맨드라인 인터페이스 기반의 스캐폴딩 도구.
scaffolding: 원래는 '공사장 등에서 사용하는 임시 가설물'이라는 뜻. 개발할 때 처음부터 개발하는 것이 아니라 기본적인 인터페이스와 틀을 제공. 개발자는 이 틀을 활용하여 전체 앱을 개발한다
특히 vue.js 앱을 개발할 때 프로젝트의 폴더 구조를 어떻게 잡을 것인지 테스트, 빌드, 의존성 부분을 어떻게 설정할 것인지에 대한 고민을 하지 않도록 프로젝트의 기본 템플릿을 설정해주는 고마운 도구이다.
설치 명령어
npm install -g vue-clivue-cli
로 만들 수 있는 프로젝트 템플릿 살펴보기 명령어
vue list위 명령어를 실행하면 이렇게 나오는데
$ vue list Available official templates: ★ browserify - A full-featured Browserify + vueify setup with hot-reload, linting & unit testing. ★ browserify-simple - A simple Browserify + vueify setup for quick prototyping. ★ pwa - PWA template for vue-cli based on the webpack template ★ simple - The simplest possible Vue setup in a single HTML file ★ webpack - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction. ★ webpack-simple - A simple Webpack + vue-loader setup for quick prototyping.여기서 temoplate 종류에 대해 설명하면 다음과 같다.
browserify: browerify + vueify 조합으로 hot-reload, linting, 단위 테스트를 지원하는 프로젝트 템플릿을 구성. 대규모 애플리케이션을 개발할 때 주로 사용.
browerify : requier() 문 등으로 여러개의 의존성 있는 자바스크립트 코드들을 참조하여 개발한 경우에 단일 자바스크립트 파일로 묶어주는 번들링 도구
browserify-simple: 빠른 포로토타이핑을 위한 browserify + vueify 가 설정된 간단한 템플릿을 제공.pwa: pwa 는 PWA(Progressive Web App) 개발을 위한 템플릿을 제공. Webpack과 유사하지만, 몇가지 라어브러리가 추가되어있다.simple: 가장 간단한 프로젝트 템플릿 유형. HTML 파일 하나만을 만들어낸다. 내부에는 vue.js 를 CDN 방식으로 참조하고 있습니다. 가장 단순한 방법으로 기본적인 기능을 테스트해볼 때 사용할 수 있다.webpack: webpack + vue-loader 조합의 기능에 hot-reload, linting, 단위테스트 기능을 제공하는 프로젝트 템플릿. 대규모 애플리케이션 개발에 적절.webpack-simple: 빠른 프로토타이핑을 위한 Webpack + vue-loader 가 설정된 간단한 템플릿을 제공
webpack : 최근에 많이 사용되기 시작한 자바스크립트 모듈 번들링 도구
vue-loader : webpack 에서 vue 컴포넌트를 번들링하기 위한 확장 도구
