Vue CLI || GAMEB

Vue CLI

지금까지는 간단한 예제만을 작성했지만 실제 프로젝트에서 html 코드를 입력하게 되면 내용이 길어짐에 따라 실행하게 전에 결과를 확인하기 어렵습니다.

특히 구문강조가 되지 않아 가독성이 어렵고, 태그의 상하위 관계도 파악하기 힘듭니다.
이러한 문제점을 해결하는 방법이 싱글 파일 컴포넌트(Single File Component) 체계입니다.
싱글 파일 Component 체계란 .vue 파일로 페이지를 구성합니다.

.vue 파일은 아래와 같은 기본 구조를 가집니다.

<template>
    <!-- HTML 태그 내용 -->
</template>

<script>
    export default {
        //자바스크립트 내용        
    }
</script>

<style>
    /* CSS 스타일 내용 */
</style>

앞에서 살펴본 예제를 싱글 파일 Component 체계로 변환하면 다음과 같습니다.

<template>
    <div>
        <span>
            <button>{{ message }}</button>
        </span>
    </div>    
</template>

<script>
    export default {
        data : }
            message : 'click this button'
        }
    }
</script>

<style>
    font-size:1.2em
</style>

.vue 파일을 브라우저가 인식할 수 있게 위해서는 웹팩이나 브라우저리파이가 필요합니다.
웹팩은 모듈번들러입니다.
또한 뷰 개발팀에서 편하게 개발환경을 구축하는데 도움을 주기 위해 vue-cli 도구를 제공합니다.

vue-cli 설치

vue-cli를 설치합니다.

npm install vue-cli -global

vue-cli에서 초기 구성을 하는 명령어는 vue init 입니다.

vue init webpack – 웹팩 기능을 이용한 프로젝트 구성 방식

vue init webpack-simple – 웹팩 최소 기능을 활용한 프로젝트 구성 방식

vue init browserify – 고급 브라우저리파이 기능 활용

**vue init browserify-simple – 브라우저리파이 최소 기능 활용

vue init simple – 최소 뷰 기능만 제공

vue init pwa – 웹팩 기반이 PWA기능을 지원

프로젝트에 따라서 초기 구성을 다르게 설정할 수 있습니다.
webpack-simple 프로젝트로 진행하겠습니다
.

뷰 프로젝트 생성

vue init webpack-simple

생성하게 되면 각종정보를 입력하고 npm install 명령어로 필요한 라이브러리를 다운합니다

Vue CLI

vue-cli 설치

뷰 프로젝트 생성

관련 라이브러리 다운