[도구] Vue CLI - 개요

개요(설명)

Vue CLI는 전체 시스템을 빠르게 개발할 수 있게 지원하는 도구입니다.

 

- 대화식 스캐폴딩(학습자에게 적절한 인지적 도움과 안내를 제공하여 학습을 촉진시키는 전략을 의미)을 지원합니다.

- 설정이없는 빠른 프로토 타입을 지원합니다.

- 다음과 같은 런타임 종속성(@vue/cli-service)을 제공합니다.

• .업그레이드를 지원합니다.
• 복잡한 웹팩 설정을 자동으로 지원합니다.
• 프로젝트 내 완성된 구성 파일을 지원합니다.
• 공식 지원 플러그인을 제공합니다.(설치형)
• 원하는 형태로 플러그인을 통해 프로젝트 확장이 가능합니다.

- 풍부하고 확장성있는 플러그인 생태계를 갖추고 있습니다.

- GUI기반의 그래픽 환경을 제공합니다.

 

프로젝트 내에서 복잡한 설정에 들어가는 공수를 최소화하고 앱을 작성하는데 최적화하여 집중력을 향상시킵니다. 그럼에도 설정의 유연함은 제공하여 필요시 언제든 커스텀할 수 있는 환경을 갖추고 있습니다.

 

시스템 구성 요소

Vue CLI는 모노 레포(Mono-Repo : 하나의 repository(저장소)에 여러 프로젝트, 패키지를 가진 것을 의미)로 구성되어 있습니다.

 

CLI

CLI는 NPM 패키지로 vue의 터미널 명령을 제공합니다. 프로젝트 생성(vue create), 프로젝트 실행(vue serve) 등 명령어와 GUI기반의 그래픽 환경(vue ui)를 제공하여 편리하게 프로젝트 관리를 진행할 수 있습니다. 

 

CLI Service

CLI Service는 개발 종속성을 가집니다. webpack 및 webpack-dev-server 위에 구축됩니다.

• 외부 CLI 플러그인을 로드할 수 있게 지원합니다.
• 대부분의 적화 된 내부 웹팩 구성을 제공합니다.
• 설정에 따라 기본적으로 프로젝트 내부에 serve, build및 inspect와 같은 스크립트 명령을 제공합니다.

리액트의 create-react-app과 조금은 다른 부분을 가지고 있지만 대략적으로 동일한 기능을 합니다.

 

CLI Plugin

CLI Plugin은 Babel / TypeScript 변환, ESLint 통합, 단위 테스트 및 엔드 투 엔드 테스트와 같은 Vue CLI 프로젝트에 선택적 기능을 제공하는 npm 패키지입니다. 사용자가 설정하거나 최적화가 어려운 부분을 간단한 명령어로 쉽게 적용할 수 있게 지원합니다.

(내장 플러그인) : @vue/cli-plugin-(내장 플러그인) - 내부에 포함된 vue에서 제작한 기본 제공 플러그인입니다.

(커뮤니티 플러그인) : vue-cli-plugin-(커뮤니티 플러그인) - 커뮤니티에서 일반 개발자가 필요한 vue 라이브러리, 모듈 등을 제작하여 배포한 플러그인입니다.

 

관련 플러그인은 모두 npm 설정 및 관련 설정정보를 내포하고 있어, 내부에서 간단한 명령어 실행만으로 쉽게 플러그인을 로드하여 개발에 사용할 수 있습니다.

 

플러그인은 프로젝트에 포함시키거나 별도로 생성하여 관리할 수 있습니다. 지속적인 사용이 필요할 경우 플러그인을 생성하여 관리하면 보다 쉽게 개발을 진행할 수 있습니다.