Vue.js (8) 뷰 프로젝트

1. 싱글 파일 컴포넌트

뷰 프로젝트는 싱글 파일 컴포넌트 체계를 사용한다.

싱글 파일 컴포넌트는 .vue 파일들로 프로젝트 구조를 구성하는 방식이며, [.vue = 컴포넌트 1개]이다.

[.vue 기본 구조]

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

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

<style lang="css">
  span {
    font-size: 1.2em;
  }
</style>

 

2. 뷰 CLI(Command Line Interface)

싱글 파일 컴포넌트를 사용하기 위해서는 Webpack이나 Browserify와 같은 도구(모듈 번들러)가 필요하며, 이는 뷰 CLI를 통해 간단하게 구성할 수 있다.

커맨드 라인에 다음 명령어를 입력하여 뷰 CLI 도구를 설치하자.
(npm 명령은 node.js가 설치되어 있어야 한다.)

> npm install vue-cli -global

 

아래 명령을 통해 뷰 CLI가 동작하는지 확인할 수 있다.

> vue
Usage: vue <command> [options]

Options:
  -V, --version  output the version number
  -h, --help     output usage information

Commands:
  init           generate a new project from a template
  list           list available official templates
  build          prototype a new project
  create         (for v3 warning only)
  help [cmd]     display help for [cmd]

 

뷰 CLI 명령어를 활용하여 초기 프로젝트를 구성한다.

[뷰 CLI 초기 명령]

Init command	Description
vue init webpack	고급 웹팩 기능을 활용한 프로젝트 구성
vue init webpack-simple	최소 웹팩 기능을 활용한 프로젝트 구성
vue init browserify	고급 브라우저리파이 기능을 활용한 프로젝트 구성
vue init browserify-simple	최소 브라우저리파이 기능을 활용한 프로젝트 구성
vue init simple	최소 뷰 기능만 들어간 HTML 파일 1개 생성
vue init pwa	웹팩 기반의 프로그레시브 웹 앱(PWA) 기능을 지원하는 프로젝트

 

다음 명령어를 실행시켜서 webpack-simple 프로젝트를 생성한다.

> vue init webpack-simple
...
> npm install
...

 

[프로젝트 주요 파일/폴더]

File/Folder	Description
/node_modules/	npm 명령어로 다운받은 라이브러리가 존재하는 위치
/src/	애플리케이션이 동작하는데 필요한 로직이 들어갈 위치
/index.html	웹 앱의 시작점. npm run dev 실행 시 로딩
/package.json	뷰 애플리케이션 npm 설정 파일. 프로젝트 정보와 npm 실행 명령어, 뷰 관련 라이브러리 의존성 정보를 담고 있다.
/webpack.config.js	웹팩 설정 파일. 빌드를 위해 필요한 로직들을 정의한다.

 

아래 명령으로 서버를 구동한다.

> npm run dev

 

3. 뷰 로더

뷰 로더는 웹팩에서 지원하는 라이브러리로, 싱글 파일 컴포넌트 체계에서 사용하는 .vue 파일을 HTML, CSS, Javascript로 인식되도록 변환해준다. 웹팩 설정파일(webpack.config.js)에 아래와 같이 적용되어있다.

...
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
          }
          // other vue-loader options go here
        }
      },
...