본문으로 바로가기

[Vue.js] vue-cli

category Helloworld!/Vue.js 2018.12.26 17:24

vue-cli 는 커맨드라인 인터페이스 기반의 스캐폴딩 도구. 


scaffolding: 원래는 '공사장 등에서 사용하는 임시 가설물'이라는 뜻. 개발할 때 처음부터 개발하는 것이 아니라 기본적인 인터페이스와 틀을 제공. 개발자는 이 틀을 활용하여 전체 앱을 개발한다


특히 vue.js 앱을 개발할 때 프로젝트의 폴더 구조를 어떻게 잡을 것인지 테스트, 빌드, 의존성 부분을 어떻게 설정할 것인지에 대한 고민을 하지 않도록 프로젝트의 기본 템플릿을 설정해주는 고마운 도구이다. 


설치 명령어

npm install -g vue-cli
vue-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 컴포넌트를 번들링하기 위한 확장 도구



댓글을 달아 주세요