- Today
- Total
개성있는 개발자 되기
[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 같은 문구
src
개발자가 작성하는 소스코드를 배치하는 디렉터리
- assets : 여러가지 자원 정보들이 저장되는 곳
- components : Vue 컴포넌트를 작성하기 위핸 디렉터리
public
배포 버전을 빌드할 때 필요한 파일이다. 웹팩이라는 도구를 사용해 이 파일을 로드한 뒤, 설정을 추가해서 빌드 버전을 만들어낸다.
nome_modules
앱개발과 배포에 필요한 npm 패키지들이 저장되는 디렉터리이다.
dist
작성한 앱 코드를 빌드해서 만든 배포버전을 저장하는 디렉터리이다.
dist 디렉터리에 생성된 파일이 바로 배포 버전으로써 운영 서버에 배포할 수 있다.
2.2 명령어 기본 사용법
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를 지정하고 실행하면 상세설명이 나온다.
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
'Web Development > Vue.js' 카테고리의 다른 글
Vee-validate 커스텀 Validation (0) | 2020.10.16 |
---|---|
[Vue.js] Ch7 ECMAScript 2015 (0) | 2019.06.06 |
[Vue.js] Ch6 컴포넌트 기초 (0) | 2019.05.13 |
[Vue.js] Ch5 스타일 적용 (0) | 2019.05.09 |
[Vue.js] Ch4 이벤트 처리 (0) | 2019.05.02 |