# CLI

뷰 CLI는 뷰로 빠르게 프로젝트를 구성하고 프로토 타이핑을 하고 싶을 때 사용하는 CLI 도구입니다.

# Vue CLI 3.x 로 프로젝트 생성

Install:

npm install -g @vue/cli

Create a project:

vue create my-project

vue app 열기:

cd my-project
npm run serve

localhost:8080 에서 확인

Vue CLI 3

# Vue CLI 2.9 로 프로젝트 생성

위에서 만들어놓은 프로젝트 폴더 삭제

rm -rf my-project

설치

// vue-cli 전역 설치, 권한에러시 sudo 추가  
npm install -g vue-cli

webpack-simple 템플릿으로 my-project 프로젝트 생성

// vue init <template-name> <project-name>  
// 기본 템플릿중 webpack-simple 템플릿  
vue init webpack-simple my-project
cd my-project
// npm 패키지 설치 
npm install
// 실행
npm run dev

localhost:8080 에서 확인

# 템플릿

vue-cli 에서는 미리 세팅된 몇가지 템플릿을 제공한다. 제공되는 템플릿은 vuejs-templates 에 각각의 레퍼로 저장되어 있다. vue list 명령어를 통해서 제공되는 템플릿 리스트를 확인할 수 있다.

# webpack

webpack

webpack+vue-loader 조합으로 hot-reload, linting(ESLint), unit testing(karma+mocha), e2e test(Nightwatch) 지원 템플릿

설치시 선택사항

• ESLint preset : Standard, AirBNB, none (사용자 설정)
• unit test (Karma + Mocha) (Yes/No)
• e2e test (Nightwatch) (Yes/No)

# webpack-simple

webpack-simple 빠른 프로토타이핑을 위한 간단한 webpack+vue-loader 조합 템플릿 (hot-reload 포함)

vue-loader 는 webpack 에서 사용하는 Vue 컴포넌트 로더 이다.

# npm run dev

• 컴파일, ESLint 과정을 거치고 로컬서버로 페이지를 실행시켜준다(http://localhost:8080/)
• 코드 수정후 저장하면 ESLint, hot-reload 동작(변경된 상태만 변경)
• Source maps 설정

# npm run build

• /dist 폴더에 Production 파일 생성
• JavaScript(UglifyJS), HTML(html-minifier) 최소화
• 하나의 CSS 파일로 최소화(cssnano)
• 모든 정적 파일은 파일명에 hash값이 추가되고 index.html에 자동으로 hash가 포함된 URL이 추가

# Vue CLI 3.x 와 CLI 2.9 차이점

기존 뷰 CLI 2.9의 프로젝트 생성 방식은 깃헙 리포지토리에 등록된 폴더와 파일을 그대로 다운로드 받는 것이었습니다. 그에 반해 뷰 CLI 3.0은 뷰 플러그인을 이용하여 필요한 기능들을 추가해 나가는 형식입니다.

# 싱글 파일 컴포넌트

싱글 파일 컴포넌트는 화면의 특정 영역에 대한 HTML, CSS, JS 코드를 한 파일에서 관리하는 방법입니다. 뷰 CLI로 프로젝트를 생성하고 나면 App.vue라는 파일을 확인할 수 있습니다. 이처럼 vue 확장자를 가진 파일을 모두 싱글 파일 컴포넌트라고 합니다.

<!-- .vue 파일 구조 -->
<template>
  <!-- html (뷰 컴포넌트의 표현단, 템플릿 문법) -->
</template>

<script>
  // 자바스크립트 (뷰 컴포넌트 내용)
</script>

<style>
  /* CSS (뷰 템플릿의 스타일링) */
</style>

<template>
    <p>{{ greeting }} world</p>
</template>
<script>
module.exports = {
    data: function(){
        return {
            greeting:'Hello'
        }
    }
}
</script>
<style scoped>
p{font-size:2em; text-align:center;}
</style>

# 싱글 파일 컴포넌트의 동작 원리

싱글 파일 컴포넌트는 뷰 로더에 의해 HTML, CSS, JS와 같은 웹 자원으로 분리되어 실행됩니다. 뷰 로더는 웹팩의 로더 종류 중 하나이고 뷰 CLI로 프로젝트를 생성하면 기본적으로 설정이 되어 있습니다.

vue-cli