Jeong Sun Min

I am an amazing person.

[Vue.js 퀵스타트] Ch8 Vue-CLI 도구

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

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

Vue CLI의 구성요소와 설치

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

@vue/cli

@vue/cli 명령어로 Vue-CLI를 실행할 수 있다.

설치 완료 후에는 vue 명령어로 새로운 vue 애플리케이션 프로젝트를 생성할 수 있다.

  • vue 단일 파일 컴포넌트를 설정 없이 실행하여 테스트할 수 있음
  • GUI 환경으로 프로젝트를 생성하거나 관리할 수 있음

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

Vue-CLI 설치법

아래 두가지 명령어 중 하나로 Vue CLI를 설치한다.

npm i -g @vue/cli
npm install -g @vue/cli

VueCli설치

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

프로젝트 생성

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

vue create [프로젝트명] 기본 설정은 babel, eslint 플러그인만 포함된다.

Eslint 란 : 특정 스타일 규칙을 준수하지 않는 문제가 있는 소스코드를 찾는데 사용되는 방식을 말하며, Linter 는 이러한 Linting 을 수행하는 도구이다. 일반적인 JavaScript 개발시 구문 오류나 기타 오류를 찾기 위해서는 실제 실행까지 시켜봐야한다. 하지만 ESLint 같은 Linting 도구를 사용하면 JavaScript를 실행하지 않고도 기본적인 문제를 발견할 수 있다.

필자는 powershell 에서 위 명령어를 실행했을 때 아래와 같은 에러가 떴다.

vue : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Users\***\AppData\Roaming\npm\vue.ps1 파일을 로드할 수 없습니다. 자세한 내용은 about_Execution_Policies(https://go.microsoft.com/fwlink/?LinkID=135170)를 참조하십시오.

이럴 때는, git bash에서 실행하면 정상적으로 vue.js 프로젝트가 만들어진다.

화면 캡처 2021-03-21 222340

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

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

다운로드

이렇게 생성된 프로젝트의 패키징을 살펴보자.

  • src : 개발자가 작성하는 소스코드를 배치하는 디렉터리
  • assets : 여러가지 자원 정보들이 저장되는 곳
  • components : Vue 컴포넌트를 작성하기 위핸 디렉터리
  • public : 배포 버전을 빌드할 때 필요한 파일이다. 웹팩이라는 도구를 사용해 이 파일을 로드한 뒤, 설정을 추가해서 빌드 버전을 만들어낸다.
  • node_modules : 앱개발과 배포에 필요한 npm 패키지들이 저장되는 디렉터리이다.
  • dist : 작성한 앱 코드를 빌드해서 만든 배포버전을 저장하는 디렉터리이다. dist 디렉터리에 생성된 파일이 바로 배포 버전으로써 운영 서버에 배포할 수 있다.

명령어 기본 사용법

vueJs_package

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

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

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

yarn serve
npm run serve

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를 지정하고 실행하면 상세설명이 나온다.

플러그인

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

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

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

vue add [플러그인]

vue.config.js

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

Vue CLI GUI 도구

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

vue ui

댓글남기기