[Vue.js] 뷰 CLI 를 통한 프로젝트 생성

0. 뷰 CLI

싱글 파일 컴포넌트 체계를 사용하기 위해서는 .vue 파일을 웹 브라우저가 인식할 수 있는 형태의 파일로 변환해 주는 W ebpack, Browserify와 같은 도구가 필요합니다.

Webpack은 웹 앱의 자원들을 자바스크립트 모듈로 변한해 하나로 묶어 웹 성능을 향상시켜 주고,  빌드 자동화 기능까지 포함한 강력한  자바스크립트 모듈 번들러이다. 비슷한 모듈 번들러로 Browserify가 있다.

그러나 Webpack을 이용해 직접 프로젝트를 구성하기에는 상당히 배워야할 것이 많습니다. 그래서 뷰 프레임워크에서는 개발자들이 편하게 프로젝트를 구성할 수 있도록 CLI(Command Line Interface)도구를 제공합니다. 이를 뷰 CLI라고 합니다.

1. 뷰 CLI 설치

bpack을 이용해 직접 프로젝트를 구성하기에는 상당히 배워야할 것이 많습니다. 그래서 뷰 프레임워크에서는 개발자들이 편하게 프로젝트를 구성할 수 있도록 CLI(Command Line Interface)도구를 제공합니다.

아래와 같이 명령어를 입력하여 간단하게 설치할 수 있습니다.

설치가 완료되면 아래와 같이 vue 명령어를 첬을 때 명령어로 인식되는 것을 볼 수 있습니다.

2. 뷰 CLI 명령어

뷰 CLI 명령어 중 가장 중요한 명령어는 vue init 입니다. vue init은 초기 프로젝트 구성을 도와줍니다. 그리고 아래와 같은 프로젝트 템플릿 구성이 있습니다.

  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) 기능을 지원하는 뷰 프로젝트

이들 템플릿은 지원하는 기능이 다르지만 크게보면 전체적으로는 비슷합니다.

1. 웹팩이나 브라우저리파이 같은 모듈 번들러를 프로젝트 자체에 포함하여 바로 사용할 수 있다.

2. .vue 파일을 HTML, CSS, js파일로 변환해 주기 위한 뷰 로더(Vue Loader)를 포함하고 있다.

결론적으로 .vue 파일 방식으로 어플리케이션을 개발하려면 뷰 로더와 이를 지원하는 웹팩, 브라우저리파이 같은 모듈 번들러가 필요하다.

템플릿 중 웹팩이나 다른 기능에 신경 쓰지 않고 뷰 프레임워크 자체에 집중할 수 있는 템플릿은 webpack-simple 입니다. webpack 템플릿은 다양한 기능을 포함하고 있어서 파악하는데 시간이 소요됩니다.

3. 뷰 CLI로 프로젝트 생성하기

1. vue init 명령어로 프로젝트 생성하기

2. npm install을 입력하여 뷰 애플리케이션을 구동하기 위한 관련 라이브러리 다운로드하기.

아래는 설치까지 완료된 후 프로젝트의 폴더 구조입니다. 이 중 package.json 파일은 프로젝트 정보를 담고 있는 설정 파일임과 동시에 npm명령어 및 뷰로 애플리케이션을 제작하는 데 필요한 라이브러리 정보들을 포함하고 있습니다.

npm install을 입력하면 package.json의 라이브러리 목록이 모두 node_modules 폴더 밑에 설치가 됩니다.

3. npm run dev로 실행하기!

실행을 하면 마침내 아래와 같이 8080포트로 index.html이 열리게 됩니다!!