Vue-CLI 도구

Vue CLI 구성요소와 설치

CLI: @vue/cli

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

CLI 서비스: @vue/cli-service

CLI 서비스는 프로젝트가 생성될 때 개발 의존성으로 설치되는 구성요소임. 내부는 웹팩과 웹팩 개발 서버 기반으로 작성됨

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

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-pluigin-vuetify : vue.js 애플리케이션에 머티리얼 디자인이 적용된 컴포넌트를 사용할 수 있도록 하는 프레임워크인 vuetify를 프로젝트에 적용할 수 있는 기능을 제공

Vue CLI 패키지 전역 설치

• npm install -g @vue/cli

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

프로젝트 생성

• vue create [프로젝트명]

생성된 프로젝트의 디렉터리와 각 파일은 내용

• src
  • assets : 여러가지 자원 정보들이 저장되는 곳. 이 디렉터리에 저장된 파일을 Vue 컴포넌트에서 사용하는 경우 빌드 과정에서 자원으로 인식되어 배포버젼을 만들어낼 때 함께 포함됨
  • components : Vue 컴포넌트를 작성하기위한 디렉터리. 하지만 Vue 컴포넌트를 이 디렉터리에 만들어야하는 것은 아님. src 디렉터리 하위에 만들고 정확한 경로로 import한다면 문제없이 사용
• public : 배포 버젼을 빌드할 때 필요한 파일. 웹팩이라는 도구를 사용해 이 파일을 로드한 뒤 설정을 추가하여 빌드버젼을 만듦
• node_modules : 앱 개발과 배포에 필요한 npm 패키지들이 저장되는 디렉터리
• dist : 작성한 앱 코드를 빌드하여 만든 배포 버젼을 저장하는 디렉터리

명령어 기본 사용법

• .\node_modules\.bin\vue-cli-service serve
• yarn serve
• npm install -g npx
  • npx vue-cli-service serve

vue-cli-service 사용법

• vue-cli-service [command] [options]
  • serve : 웹팩 개발 서버를 이용해 프로젝트 코드를 실행합니다. HMR(Hot Module Replacement) 기능을 지원하므로 실행하므로 실행 도중 소스 코드가 변경되고 저장되면 즉시 브라우저 화면에 반영됩니다.
  • build : 빌드하여 배포 버젼의 소스 코드를 생성하여 지정 디렉터리에 저장합니다. 빌드된 버전의 코드가 저장되는 기본 경로는 dist 디렉터리 입니다. 
  • init : eslint 기능을 이용해 코드의 표준화되지 않은 부분을 검사하고 교정합니다.
  • inspect : 현재 프로젝트의 웹팩 설정 정보를 보여줍니다.

플러그인

기본적으로 @vue/cli-plugin-eslint, @vue/cli-plugin-babel 두개의 플러그인이 설치됨

플러그인 추가 명령어

• vue add [플러그인]
  • vue add router

vue.config.js

Vue CLI 내부는 웹팩이라는 모듈 번들러 도구를 이용하도록 만들어져 있는데 모두 캡슐화 되어 있기 때문에 웹팩 설정을 위해서는 vue.config.js 라는 파일 프로젝트 내부에 작성에 설정을 변경함

https://cli.vuejs.org/config/ 

Configuration Reference | Vue CLI

Vue CLI GUI 도구

• vue ui 명령어로 실행