Vue CLI란?

 @vue/cli를 사용하면 커맨드 창을 통해서 별다른 설정 없이 빠르게 기본 골격을 갖춘 프로젝트를 생성할 수 있습니다. 따라서 복잡한 설정에 신경쓰지 않고 바로 앱 개발에 집중할 수 있는 환경이 만들어지죠. 별도의 설정을 할 때도 기존 설정을 제거 없이 변경이 가능합니다.

 

Vue CLI 3.0 이상 버전은 @vue/cli 패키지명을 사용하고 있습니다. 

Vue CLI의 컴포넌트들

---

Vue.js의 vue-cli 깃헙 저장소(source code)를 살펴보면 여러 패키지들이 있습니다. 다 Vue CLI의 컴포넌트들입니다. 하나씩 자세히 살펴보겠습니다.

 

CLI ( @vue/cli )

CLI는 전역으로 설치되는 npm 패키지로 터미널에서 vue 명령어를 사용할 수 있게 합니다. 'vue create' 명령어를 통해서 빠르게 새로운 프로젝트 틀을 생성하고 'vue serve' 명령어로 빠르게 실행시켜 볼 수 있습니다. 프로젝트들을 UI를 통해서 관리할 수 있게 해주는 vue ui 컴포넌트도 있습니다. 

 

CLI Service ( @vue/cli-service )

이 npm 패키지는 개발용으로 사용되고 @vue/cli로 생성한 모든 프로젝트에 지역적으로 설치됩니다. CLI Service는 webpack과 webpack-dev-server 기반으로 만들어졌고 다음 기능을 제공합니다.

• 다른 CLI 플러그인을 로드
• 대부분의 앱에 최적화 된 내부 웹팩 설정 제공
• serve, build, inspect 명령어 제공

공식 문서를 읽다보면 @vue/cli-service가 언급되는데 이것은 Vue CLI를 통해 프로젝트가 생성될 때 같이 설치되는 패키지입니다. 

 

CLI Plugins

CLI Plugins는 Vue CLI 프로젝트에 부가적인 기능을 제공하는 npm 패키지입니다. 예를 들어 Babel/TypeScript traspilation, ESLint integration, unit testing, end-to-end testing 같은 기능들을 설치하고 사용할 수 있죠. CLI Plugin들의 이름에는 규칙이 있는데 '@vue/cli-plugin- + 이름' 은 빌트인용 플러그인 이름이고 'vue-cli-plugin- + 이름' 은 커뮤니티 버전 플러그인 이름입니다. 

 

vue-cli-service를 실행해서 프로젝트 내부를 바이너리할 때 package.json에 적혀있는 모든 CLI 플러그인들을 로드합니다.

 

플러그인들은 프로젝트 생성 시 포함되어 있거나 나중에 추가할 수 있습니다. 또 재사용가능한 preset으로 그룹화해서 보관할 수도 있습니다.