[Vue.js] Ch8 Vue-CLI 도구

Vue Cli는 Vue.js 애플리케이션을 빠르게 개발할 수 있는 관련된 기능을 모두 제공하는 Vue.js개발 도구이자 시스템이다.

다양한 플러그인과 프리셋을 로딩하여 프로젝트의 초기 설정과 개발을 손쉽게 할 수 있도록 도와준다.

 

1. Vue CLI의 구성요소와 설치

Vue CLI는 크게 3가지의 구성요소로 이루어져 있다.

CLI : @vue/cli

→ vue 명령어를 실행할 수 있도록 한다.

• vue 명령어로 새로운 vue 애플리케이션 프로젝트를 생성할 수 있다.
• vue 단일 파일 컴포넌트를 설정 없이 실행하여 테스트할 수 있음
• GUI 환경으로 프로젝트를 생성하거나 관리할 수 있음

CLI 서비스 :@vue/cli-service

→ 프로젝트가 생성될 때 개발 의존성으로 설치되는 구성요소이다. CLI 서비스 내부는 웹팩(webpack)과 웹팩 개발 서버 (webpack-dev-server) 기반으로 작성되어 있다.

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

CLI 플러그인

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

대표적인 플러그인은 다음과 같다.

• 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를 제공한다.

npm 패키지 매니저로 Vue CLI를 설치한다.

npm install -g @vue/cli

2. 프로젝트 생성과 기본 사용법

2.1 프로젝트 생성

vue 명령어로 프로젝트를 생성한다.

vue create [프로젝트명]

기본 설정은 babel, eslint 플로그인만 포함이된다.

 

* Eslint 란 : 특정 스타일 규칙을 준수하지 않는 문제가 있는 소스코드를 찾는데 사용되는 방식을 말하며, Linter 는 이러한 Linting 을 수행하는 도구이다.

일반적인 JavaScript 개발시 구문 오류나 기타 오류를 찾기 위해서는 실제 실행까지 시켜봐야한다.

하지만 ESLint 같은 Linting 도구를 사용하면 JavaScript를 실행하지 않고도 기본적인 문제를 발견할 수 있다.

 

설정이 완료되면 보일러플레이트 코드와 필요한 라이브러리, 패키지들을 다운로드해서 프로젝트 템플릿을 생성하는 단계를 자동으로 진행한다.

* BoilerPlate 코드란 : 꼭 필요하면서 간단한 기능인데, 많은 코드를 필요로 하는 코드이다. 예를 들어 getter setter 같은 문구

 

vue 프로젝트

src

개발자가 작성하는 소스코드를 배치하는 디렉터리

• assets : 여러가지 자원 정보들이 저장되는 곳
• components : Vue 컴포넌트를 작성하기 위핸 디렉터리

public

배포 버전을 빌드할 때 필요한 파일이다. 웹팩이라는 도구를 사용해 이 파일을 로드한 뒤, 설정을 추가해서 빌드 버전을 만들어낸다.

 

nome_modules

앱개발과 배포에 필요한 npm 패키지들이 저장되는 디렉터리이다.

 

dist

작성한 앱 코드를 빌드해서 만든 배포버전을 저장하는 디렉터리이다.

dist 디렉터리에 생성된 파일이 바로 배포 버전으로써 운영 서버에 배포할 수 있다.

 

2.2 명령어 기본 사용법

 

package.json

package.json 파일을 보면 scripts 가 있다. 이걸 보면 ve-cli-service를 이용해서 serve, build, lint와 같은 명령어를 실행하는 것을 알수 있고, 현재 전역수준이 아닌 프로젝트 단위의 의존성으로 설치되어 있기 때문에 직접 명령창이나 터미널창에서 실행하려면 nome-modules 경로를 직접 입력해야 한다.

./node_modules\.bin\vue-cli-service serve

 

이러한 이유로 스크립트를 이용한다. 

yarn serve

npm run serve

 

2.3 vue-cli-service 사용법

vue-cli-service의 사용방법은 다음과 같다.

vue-cli-service [command][options]

command : 실행하려는 작업. serve, build, lint, inspect를 지원한다.

 

serve : 웹팩 개발서버를 이용해 프로젝트 코드를 실행한다. 실행 도중 소스 코드가 변경되고 저장되면 즉시 브라우저 화면에 반영된다.

HMR(Hot Module Replacement) 는 소스 코드의 변경을 탐지해 개발 서버 메모리상에 다시 빌드한 코드를 배치하여 재실행해주는 기능이다. 따라서 재구동하지 않아도 소스가 반영된다.

build : 빌드하여 배포 버전의 소스 코드를 생성하여 지정 디렉터리에 저장한다.

lint : eslint 기능을 이용해 코드의 표준화되지 않은 부분을 검사하고 교정한다.

inspect : 현재 프로젝트의 웹팩 설정 정보를 보여준다.

 

각 command에 대한 상세한 정보는 옵션(options)에 --help를 지정하고 실행하면 상세설명이 나온다.

npm run serve로 실행한 결과

3. 플러그인

Vue CLI를 이용해 생성한 프로젝트는 크게 서비스(@vue/cli-service)와 플러그인(@vue/cli-plugin)으로 구성되어 있다.

서비스는 하나지만, 플러그인은 여러 개를 선택할 수 있다.

플러그인을 이용하면 프로젝트의 웹팩 구성을 변경하고 명령이나 기능을 추가하는 작업을 선택할 수 있다.

 

vue add [플러그인]

 

4. vue.config.js

 

CLI 서비스는 모두 캡슐화되어 있기 때문에 내부의 웹팩에 대해 웹팩 설정 파일을 이용해 직접 설정할 수 없다. 대신 웹팩 설정을 위해 vue.config.js라는 파일을 프로젝트 내부에 작성한다.

 

5. Vue CLI GUI 도구

 

명령창이나 터미널창을 이용해서 프로젝트를 생성하고 관리할 수 있지만 브라우저 화면으로 GUI도구를 이용할 수 있다.

vue ui

GUI 화면