[Vue.js] 뷰 CLI

1. 뷰 CLI

뷰 CLI는 뷰 프로젝트를 쉽게 구성할수 있도록 개발 환경을 설정해주는 도구이다. CLI에서 제공하는 명령어를 사용하면 뷰 애플리케이션을 개발하기 위한 초기 프로젝트 구조를 쉽게 구성할 수 있다.

CLI ?
명령 줄 인터페이스(CLI, Command line interface) 또는 명령어 인터페이스는 텍스트 터미널을 통해 사용자와 컴퓨터가 상호 작용하는 방식을 뜻한다. 즉, 작업 명령은 사용자가 컴퓨터 키보드 등을 통해 문자열의 형태로 입력하며, 컴퓨터로부터의 출력 역시 문자열의 형태로 주어진다.

1.1 뷰 CLI 설치하기

터미널을 열고 아래 코드를 입력한다. CLI를 설치하기 위해서는 node가 설치되어 있어야하니 node 설치를 안했다면 먼저 node를 설치하고 진행해야 한다.

npm install -g @vue/cli
//or
yarn global upgrade --latest @vue/cli

혹시 맥에서 위 코드로 설치가 안된다면 권한 문제일 가능성이 높으니 코드 앞에 sudo 를 붙여서 다시 시도해보자. 설치가 완료되었다면 버전확인을 통해 정상적으로 설치가 됐는지 확인한다.

vue --version

2. 뷰 CLI 명령어

명령어는 뷰 개발을 시작할 때 초기 프로젝트를 쉽게 구성하도록 도와준다. vue init 명령어를 사용하여 간단히 프로젝트를 생성할 수 있다. 다음은 vue init 명령어를 입력할 때 사용하는 프로젝트 템플릿 6종류이다.

템플릿 종류	설명
vue init webpack	고급 웹팩 기능을 활용한 프로젝트 구성 방식. 테스팅, 문법 검사 등을 지원
vue init webpack-simple	웹팩 최소 기능을 활용한 프로젝트 구성방식, 빠른 화면 프로토타이핑 용
vue init browserify	고급 브라우저리파이 기능을 활용한 프로젝트 구성 방식. 테스팅, 문법 검사 등을 지원
vue init browserify-simple	부라우저리파이 최소 기능을 활용한 프로젝트 구성항식. 빠른 화면 프로토타이핑용
vue init simple	최소 뷰 기능만 들어간 HTML 파일 1개 생성
vue init pwa	웹팩 기반의 프로그레시브 웹 앱(PWA, Progressive Web App) 기능을 지원하는 뷰 프로젝트

3. 뷰 로더

뷰 로더는 웹팩에서 지원하는 라이브러리로, 싱글 파일 컴포넌트 체계에서 사용하는 .vue 파일의 내용을 브라우저에서 실행가능한 웹 페이지의 형태로 변환해주는 역할을 한다.

웹팩은 자바스크립트 모듈만 인식할 수 있기 때문에 뷰 로더가 .vue 파일을 자바스크립트 모듈로 변환하고 필요에 따라 웹팩의 추가 플러그인을 이용하여 웹팩으로 변환된 자바스크립트 모듈을 CSS나 HTML로 분리할 수 있다.

3.1 뷰 로더의 설정 확인

뷰 로더가 웹팩에서 어떻게 설정되어 있는지 확인해보자.

위에서 설명한 CLI 명령어인 vue init webpack-simple을 통해 프로젝트를 생성하면 webpack.config.js 파일이 있을것이다. 해당 파일을 열어보면 아래와 같이 뷰 로더가 적용되어 있는 모습을 확인할 수 있다.

module : {
	rules : [
		{
			test : /\.vue$/,          //대상 파일지정
			loader : 'vue-loader',    //사용할 로더 지정
			options : {},
			loaders : {}
		}
	]
}

module과 rules는 웹팩의 로더를 설정하는 속성이다. 위 코드에서 알아야할 것은 test와 loader 속성인데 test는 로더가 적용될 대상 파일을 지정하는 속성이고, loader는 적용할 로더의 종류를 지정하는 속성인데 결국 위 코드는 프로젝트 폴더 내에서 .vue 확장자를 가진 파일에 모두 뷰 로더를 적용하는 역할을 한다.

뷰 CLI로 프로젝트를 생성하면 웹팩과 뷰 로더가 기본적으로 설정되어 있기 때문에 웹팩을 몰라도 어느정도의 화면 프로토타이핑이 가능하다.