Vue-CLI 도구

Vue CLI는 개발자들에게 표준화된 개발의 기준선을 제공하며, Vue.js 애플리케이션을 빠르게 개발할 수 있는 관련 기능을 제공하는 Vue.js 개발자 도구이자 시스템이다. Vue CLI 도구는 기본적으로 웹팩(webpack)이라는 모듈 번들러를 사용한다.

---

웹팩(webpack)

웹 애플리케이션의 발전과 함께 자바스크립트 코드는 점점 더 복잡해지고 대규모 의존성을 가지게 되었다. 기능과 컴포넌트에 따라 코드가 분할되었고(모듈) 이에 따라 관리해야하는 파일도 늘어났다. 하지만 여러 개의 파일을 로딩하기 위해서는 그만큼의 네트워크 요청이 증가한다. 따라서 이렇게 분할된 파일들을 묶어주어(번들) 네트워크 비용을 최소화하는 방법이 필요하게 되었다. 이렇게 자바스크립트로 작성된 모듈을 번들링하여 번들로 만들어주는 모듈번들러(Module Bundler)라고 하며, 웹팩은 대표적인 모듈번들러이다.

---

Vue CLI의 구성요소와 설치

1. CLI : @vue/cli

vue 명령어로 수행할 수 있는 기능

• 새로운 Vue 애플리케이션 프로젝트 생성
• vue 단일 파일 컴포넌트를 설정 없이 실행하여 테스트
• GUI 환경으로 프로젝트를 생성하거나 관리

2. CLI 서비스 : @vue/cli-service

프로젝트가 생성될 때 개발 의존성으로 설치되는 구성요소. 웹팩과 웹팩 개발 서버 기반으로 작성됨

 

CLI 서비스를 이용해 수행할 수 있는 기능

• 프로젝트를 웹팩 개발 서버 기반으로 구동
• 프로젝트 소스코드와 리소스를 빌드하고 번들링
• 프로젝트 코드를 테스트

3. CLI 플러그인

Vue CLI로 생성된 프로젝트 추가적인 기능을 제공하는 npm 패키지

 

대표적인 CLI 플러그인

• router : 애플리케이션에 라우팅 기능을 제공하는 vue-router 패키지와 예제 코드를 프로젝트에 설치
• vuex : 애플리케이션에 상태관리 기능을 제공하는 vuex 패키지와 예제 코드를 프로젝트에 설치
• @vue/cli-plugin-babel : babel 을 이용한 트랜스파일을 수행할 수 있는 기능을 제공
• @vue/cli-plugin-eslint : eslint를 이용하여 코드의 오류를 확인하고 수정해줄 수 있는 기능을 제공
• @vue/cli-plugin-unit-jest : jest 프레임워크를 이용한 단위테스트를 수행할 수 있는 기능을 제공
• vue-cli-plugin-vuetify : vue.js 애플리케이션에 머티리얼(Material) 디자인이 적용된 컴포넌트를 사용할 수 있도록 하는 프레임워크은 vuetify를 프로젝트에 적용할 수 있는 기능을 제공

---