[Vue.js] Vue CLI(GUI)

Vue.js 2018.12.18 18:59

Vue CLI

Vue CLI는 Vue.js 애플리케이션을 빠르게 개발할 수 있는  관련된 기능을 모두 제공하는 Vue.js 개발 도구이자 시스템이다. 개발자들에게 표준화된 개발의 기준선을 제공하고 정해진 틀 속에서 개발이 가능하면서도 기본 제공되거나 제 3자가 제공하는 다양한 플러그인과 프리셋을 로딩하여 프로젝트의 초기 설정과 개발을 손쉽게 할 수 있도록 도와준다. 따라서 개발자가 프로젝트 구성을 설정하는데 드는 노력을 줄이고 개발에 좀더 집중할 수 있도록한다.






1. Vue CLI 구성요소

1) CLI : @vue/cli

컴퓨터 내부 어디에서나 실행할 수 있도록 npm을 이용해 전역에 설치하며 터미널창에서 vue 명령어를 실행할 수있도록 한다. vue 명령어로 수행할 수 있는 기능은 다음과 같다.


- 새로운 Vue 애플리케이션 프로젝트를 생성할 수 있음

- vue 단일 파일 컴포넌트를 설정 없이 실행하여 테스트할 수 있음

- GUI 환경으로 프로젝트를 생성하거나 관리할 수 있음



2) CLI : @vue/cli-service

CLI 서비스는 프로젝트가 생성될 때 개발 의존성으로 설치되는 구성요소이다. CLI 서비스의 내부는 웹펙(webpack)과 웹팩 개발 서버(webpack-dev-server) 기반으로 작성되어 있다. CLI 서비스를 이용해 수행할 수 있는 기능은 다음과 같다


- 프로젝트를 웹팩 개발 서버 기반으로 구동 가능

- 프로젝트 소스코드를 리소스를 빌드하고 번들링할 수 있음

- 프로젝트의 코드를 테스트할 수 있음



3) CLI 플러그인

CLI 플러그인은 Vue CLI로 생성된 프로젝트 추가적인 기능을 제공하는 npm 패키지이다. CLI도구를 이용해 프로젝트를 생성할 때 추가할 플러그인을 선택할 수 있으며, 프로젝트가 생성된 이후에도 vue add 명령어를 이용해 플러그인을 추가할 수 있다. 또한 CLI 플러그인은 기본적으로 제공되는 것도 있지만 누구나 플러그인을 만들어 제공할 수 있다.


대표적인 CLI 플러그인 

router

vuex

vue-cli-plugin-vuetify



Vue CLI를 설치하기 위해서 npm 패키지 매니저를 이용해 전역 수준으로 설치한다.


npm install -g @vue/cli (windows)

sudo npm install -g @vue/cli (mac)





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

Vue CLI를 이용해 프로젝트를 생성할 때는 vue create 명령어를 사용한다.


vue create [프로젝트명]


vue create 명령어로 프로젝트를 생성할 때 몇 단계릐 절차를 거친다. 첫 단계는 프리셋을 포함하는 단계이다. default로 하면 babel, eslint 프러그인만 포함된다. 


(생성 화면)


프리셋과 플러그인을 선택하는 질문들이 나온다 알아서 셋팅해주고 마무리하면 된다.


(CLI로 프로젝트를 생성 완료한 모습)





생성한 프로젝트의 구조를 VSCode로 실행해보면 위의 사진과 같다.


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

assets -> 여러가지 자원 정보들이 저장되는곳, 이 디렉터리에 저장한 파일을 Vue 캠포넌트에서 사용하는 경우 빌드 과정에서 자원으로 인식되어 배포버전을 만들어낼때 함께 배포된다.

components -> Vue 컴포넌트를 작성하기 위한 디렉터리. 하지만 꼭 Vue 컴포넌트가 이 디렉토리로만 들어가는것은 아니다.


public : 배포 버전을 빌드할 때 필요한 파일


node_modules : app 개발과 배포에 필요한 npm 패키지들이 저장되는 디렉터리


dist : 작성한 앱 코드를 빌드하여 만든 배포 버 저장하는 디렉터리. Vue 컴포넌트들은 모두 js 파일로 트랜스파일되어 몇 개의 js 파일로 번들링되고 난독화하여 저장한다.





vue-cli-service는 vue CLI 설치 시에 프로젝트 단위로 설치되느니 실행 명령어이다. vue-cli-service의 사용 방법은 다음과 같다.


vue-cli-service [command] [options]

command 

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

2) build : 빌드하여 배포 버전의 소스 코드를 새엉하여 지정 디렉터리에 저장한다. 빌드된 버전의 코드가 저장되는 기본 경로는 dist 디렉터리이다.

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

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


option

1) --open : 서버 시작시 브라우져가 같이 실행

2) --copy : 서버 시작시 URL 주소가 클립보드에 복사

3) --host : 호스트 주소 설정 (default : 0.0.0.0 localhost)

4) --port :  포트 설정 (default : 8080)

etc..


만일 개발 서버를 구동하면서 웹 브라우져를 자동으로 열고 싶다면 --open 옵션을 추가해주면된다. package.json 파일의 script 옵션에 server 값을 다음과 같이 변경하면 npm run serve만으로도 간단히 실행할 수 있다.

"name": "test1",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve --open --port 3000",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},

(프로젝트 내부의 package.json의 script 부분)


이제 실행을 해보자. vs

VSCode의 터미널에 npm run serve 입력


(정상 실행된모습)

자동으로 웹브라우져가 실행되면서 결과가 나오면 성공적이다.




3. 플러그인

Vue CLI를 이용해 생성한 프로젝트는 크게 서비스와 플러그인으로 구성되어 있다. 서비스는 하나이지만 플러그인은 여러 개를 선택할 수있다. 대부분의 플러그인들의 이름은 @vue/cli-plugin으로 시작한다. 플러그인을 이용하면 프로젝트의 웹팩 구성을 변경하고 명령이나 기능을 추가한느 작업을 선택적으로 할 수 있다.


Vue.CLI의 기본 프리셋으로 프로젝트를 생성하면 @Vue/cli-plugin-babel, @Vue/cli-plugin-eslint의 두 가지 플러그인이 설치된다. 추가하고 싶은 플러그인 이있다면 다음의 명령어로 추가하면된다


vue add [플러그인]


채표적인 플러그인중 하나인 vuex, rotuer를 설치해보자 


vue add router



이제 다시 npm run serve를 실행하여 정상적으로 설치되었는지 확인해보자



home과 about 페이지가 정상적으로 동작한다. 




3. vue.config.js

vue CLI의 내부는 웹팩이라는 모듈 번들러 도구를 이용하도록 만들어져있다. 하지만 CLI 서비스는 모두 캡슐화되어 있기 때문에 내부의 웹펙에 대해 웹펙 설정 파일을 이용해 직접 설정할 수 없다. 대신 웹팩 설정을 위해 vue.config.js라는 파일을 프로젝트 내부에 작성한다.


나중에 axios를 이용한 http 통신을 할때 웹팩 개발 서버의 proxy를 설정하기 위해 여기를 수정할 것 이다.




4. Vue CLI GUI 도구

Vue CLI는 명령창이나 터미널 창을 이용해 프로젝트를 생성하고 관리할 수 있지만 브라우져를 통해

GUI 도구를 이용할 수 있다.


프로젝트를 생성하기 위한 기본 디렉터리를 하나 만들고 명령창이나 터미널을 열어 해당 디렉토리로 이동한다. 그리고 나서 vue ui 명령어를 실행하면 아래와 같은 화면이 뜰껏이다.


(VSCode 터미널에서 폴더 생성후 vue ui 실행한 모습)



(실행하면 웹브라우져가 구동된다)




(하단의 새 프로젝트를 만들어보세요 클릭)



(폴더와 프로젝트명 설정후 다음버튼 클릭)



(기본 디폴트 프리셋 선택후 프로젝트 만들기 클릭)


(Vue Project가 대쉬보드 형태로 확인할 수 있다. 작업 목록 클릭)





(Serve 선택후 시작을 누르면 애플리케이션이 구동된다)


스크린샷에서 보이는것처럼 단순히 실행만 할 수 있는게 아니라 각종 통계정보가 같이 나온다.








'Vue.js' 카테고리의 다른 글

[Vue.js] Vuex를 이용한 상태 관리 (store, mutation, getter)  (0) 2018.12.23
[Vue.js] axios 서버통신  (0) 2018.12.22
[Vue.js] Vue CLI(GUI)  (0) 2018.12.18
[Vue.js] Component  (0) 2018.12.18
[Vue.js] Event 처리  (0) 2018.12.17
[Vue.js] Vue instance (뷰 인스턴스)  (0) 2018.12.16
Posted by 루우지