vue.js 간단하게 시작하기 vue-cli

Vue.js는 최근 가장 빠르게 발전하고 확산되고 있는 프론트엔드 프레임워크중 신흥 강자로 떠오르 있는 대표적이 프레임워크이다. 

아직은Angular.js나 React.js보다 많이 알려지지 않았지만, 최근 급속도로 확산되고 있다. 

vue-cli 를 통해서 간단하게 자동으로 기본환경 세팅 및 개발서버, 테스트, 빌드를 할수있다.

Vue.js 란?

Vue.js는 Google Creative Lav에서 일하던 에반 유(Evan you)가 2013년 12월에 UI를 빠르게 개발하기 위해 만든 자바스크립트 프레임워크이다. 웹 화면 작성에 최적화된 mvvm패턴을 따르고 있다. Vue.js는 다른 프레임워크와 달리 굉장히 유연하고 가볍다. mvvm패턴중 vue.js 는 viewmodel에 해당한다.

MVVM 패턴은 Model - View - ViewModel 의 줄임말 이다.

MVVM 패턴은 애플리케이션 로직과 UI 로직의 분리를 위해 설계된 패턴이고, View는 HTML과 CSS로 작성하게 된다. ViewModel은 View의 실제 논리 데이터 흐름을 담당한다.

그리고, jQuery처럼 <script> 태그를 이용하여 cdn상의 주소를 간단히 참조한 후 디렉티브만 익혀도 손쉽게 적용할 수 있다. 

또한 vue-router를 이용해 spa애플리케이션도 어렵지 않게 개발할 수 있고, es6(ecma script 2015)와 webpack번들링 (여러개의 js를 하나의 js묶음으로 만들어줌)을 통해 대규모 애플리케이션을 단일 파일 컴포넌트로 빌드할 수 있다.

개발환경

개발 환경은 최소 요구사항으로 Node.js 4.x 이상(8.x 추천)과 Git 이 설치되어 있어야 한다.

크롬브라우저의 요소검사(f12)에서 vue컴포넌트를 분석해주는 dev tools도 있으니 설치하면 유용하다.

Vue.js cli

vue-cli는 에반 유가 공식적으로 관리하는 커맨드라인 인터페이스 기반의 스캐폴딩 도구 이다. 

특히, Vue.js 앱을 개발할 때 프로젝트의 폴더 구조를 어떻게 잡을 것인지, 테스트, 빌드, 의존성 부분은 어떻게 설정할 것인지에 대한 고민을 하지 않도록 프로젝트의 기본 템플릿을 설정해주는 도구이다.

npm install명령으로 -g (전역으로) vue-cli를 설치한다.

-g vue-cli로 해야 2.x버전이 설치된다.

v.3 베타버전이 설치되면 프로젝트 생성방법이 약간달라진다.(참조)

--2.9.x 설치 권장
npm install -g vue-cli

-- v3 베타버전 
npm install -g @vue/cli

vue-cli가 설치되었다면 template중 하나를 골라서 init(초기화) 시켜주어야 한다.

Vue-CLI 템플릿 리스트(이중에 하나를 선택할 수 있다.)

• simple : 가장 간단한 템플릿 유형으로 HTML 파일 하나만을 만들어 낸다. 내부에는 Vue.js를 CDN 방식으로 참조하고 있다.
• browserify : browserify + vueify 조합으로 hot-reload, linting, 단위 테스트를 지원하는 템플릿 유형이다.
• browserify-simple : 빠른 프로토타이핑을 위한 browserify_vueify가 설정된 간단한 템플릿 유형이다.
• webpack : webpack + vue-loader 조합의 기능에 hot-reload,lining, 단위 테스트를 지원하는 템플릿 유형이다.
• webpack-simple : 빠른 프로토타이핑을 위한 Webpack + vue-loader 가 설정된 간단한 템플릿 유형이다.
• pwa : PWA(Progressive Web App) 개발을 위한 템플릿 유형이다.

/**
 * template name : 위 템플릿중 하나를 지정
 * project name : 해당경로에서 지정이름으로 폴더를 하나생성
 */
vue init [templet name][project name]

아래 명령으로 cli에서 제공되는 템플릿 리스트를 확인할 수 있다.

vue list

테스트 해보기

vue init webpack-simple test-app 

위 명령은 webpack-simple템플릿을 사용하며, test-app이란 폴더를 만들어낸다.

아래와 같은 파일/폴더 구조가 생성되며, 이제 package.json에 vue.js앱 구동에 필요한 의존항목들이 정의되어있다.

이제 install명령을 통해 의존항목들을 설치하면 node_modules폴더가 생성이된다.

npm install

vue앱 구동에 필요한 모듈들이 모두 설치가 된 것이다.

그럼 이제 빌드만하면 기본적인 vue.js 앱 화면을 볼 수 있다.

기본적인 빌드명령어는 package.json에 scripts항목에 2가지로 설정되어있다.

dev : 로컬 메모리에 html을 임시 생성하여 localhost:8080/으로 로컬개발서버를 띄운다.

bulid : dist폴더에 최종 빌드 된 html파일과 리소스들을 만들어준다.

그럼 개발용으로 빌드하여 테스트해보자..

명령어 동시에 localhost:8080으로 개발서버가 열렸다는 문구가 표시된다.

npm run dev

브라우저가 열리며 vue.js 기본 앱화면이 만들어진걸 볼 수 있다.

이제 /src 폴더에서 개발하면 된다!

참고 링크

• Vue.js 공식 한국어 가이드
• Vue.js 한국 사용자 모임