[도구] Vue CLI - 기초

간단한 프로토타이핑 만들기

npm install -g @vue/cli @vue/cli-service-global 
# or 
yarn global add @vue/cli @vue/cli-service-global

프로토 타이핑을 위해 전역 애드온(Add-On : 유틸리티를 보강하거나 향상시키기 위해 설치하는 프로그램)을 설치해야합니다. 하지만, 전역 설치라는 종속성에 의해 다른 시스템과의 충돌이 발생할 수 있다는 단점이 존재합니다.

 

빠르게 작성한 *.vue 파일을 vue serve *.vue, vue build *.vue 를 통해 결과를 확인할 수 있습니다.

 

프로젝트 만들기

1). CLI 방식

간단한 프로젝트 만들기 vue create [프로젝트명] 명령어을 제공하며, 관련 명령어를 실행시 프로젝트에 필요한 스펙을 정의하도록 되어있습니다. 방향키와 엔터를 통해 해당 설정 진행이 가능합니다.

선택가능한 매뉴얼을 통해 다양한 내장 플러그인을 선택하실 수 있습니다. 스페이스바를 통하여 여러가지 원하는 설정을 초기에 진행할 수 있으며, 자동으로 관련 설정에 필요한 웹팩 및 프로젝트 설정을 진행합니다.

위 부분은 실제 프로젝트 생성을 통해 다양한 설정 방법은 연습해 보시길 추천합니다. 설정된 프레임워크 프로젝트 구조를 확인하고 자신이 설정된 설정 파일들이 어떻게 배치되고 생성되는지 확인합니다.

~ / .vuerc
저장된 사전 설정은 .vuerc사용자 홈 디렉토리에 이름이 지정된 JSON 파일에 저장됩니다 . 
저장된 사전 설정 / 옵션을 수정하려면이 파일을 편집하면됩니다.

 

2. GUI 방식

vue ui 명령어를 통해 그래픽 인터페이스를 사용하여 프로젝트를 작성하고 관리 할 수도 있습니다. 

Plugin 및 Preset 설정

프로젝트를 생성 후 자유롭게 플러그인을 추가하실 수 있습니다. 플러그인은 vue에서 제공하는 핵심 플러그인(Core-Plugin)과 커뮤니티에서 제공하는 커뮤니티 플러그인(Community-Plugin)이 존재합니다. 위 플러그인 모두 검색할 수 있는 https://awesomejs.dev/for/vue-cli/를 제공합니다. vue add [@제조사(없을경우 제 3자)/플러그인] 명령어를 통해 실행 가능하며, 제거가 필요할 경우 GUI를 통해 의존성을 삭제하여 관리하는 것이 편리합니다.

프로젝트 프리셋의 경우 프로젝트 개발에 필요한 사전 설정을 지정하는 방법으로 프로젝트 홈 디렉토리 ( ~/.vuerc) 의 구성 파일에 저장됩니다 . 이 파일을 직접 편집하여 저장된 사전 설정을 [추가 / 수정 / 삭제] 할 수 있습니다. 실제 프리셋 설정의 경우 플러그인의 제어에서 사전에 필요한 설정이 있을 경우를 제외하고 크게 사용할 일이 없지 않을까 생각됩니다.

 

만약, 제어하고자하는 플러그인 속성 혹은 프로젝트 속성이 있을 경우 https://cli.vuejs.org/guide/plugins-and-presets.html#presets를 참조하여 설정을 진행하면 될 것 같습니다.

 

CLI Service

vue 의 개발 실행, 검사 및 빌드를 진행하게 해주는 패키지입니다. 

- npm run serve / yarn serve / npx vue-cli-service serve : 개발 모드(DEV) 실행 - 웹팩의 HMR

- vue build : dist 폴더 내의 최적화된(번들링, 캐싱 등) 배포용 빌드 파일 생성

- vue inspect ( > output.json[파일명] ) : 현재 지정된 웹팩 설정을 확인

 

위와 같은 명령을 제공하며, npm run serve에 HMR의 경우 아래와 같이 설명할 수 있습니다.

핫 모듈 리플레이스먼트(Hot Module Replacement - HMR)는 웹팩이 제공하는 가장 유용한 기능 중 하나입니다. 전체 새로고침 없이 모든 종류의 모듈들을 런타임 시점에 업데이트 되게 해줍니다. 이 가이드에서는 구현에 초점을 두고 설명합니다. 어떻게 동작하는지, 왜 유용한지에 대한 더 자세한 내용은 concept page 를 확인하십시오.