Single File Component

Single File Components 체계는 .vue 파일로 프로젝트 구조를 구성하는 방식을 말한다. 확장자 .vue 파일 1개는 뷰 애플리케이션을 구성하는 1개의 컴포넌트와 동일하다.

<!--  화면에 표시할 요소들을 정의하는 영역 -->
<template>
<!-- HTML 태그 내용 -->
</template>

<!-- 뷰 컴포넌트의 내용을 정의하는 영역 -->
<script>
exports default{
  // 자바 스크립트 내용
}
</script>

<!-- template에 추가한 HTML 태그의 CSS 스타일을 정의하는 영역 -->
<style>
  /* CSS 스타일 내용 */
</style>

Vue CLI

Single File Component 체계를 사용하기 위해서는 .vue 파일을 웹 브라우저가 인식할 수 있는 형태의 파일로 변환해주는 웹팩(webpack)이나 Browserify와 같은 도구가 필요하다. 웹팩은 웹 앱의 자원(HTML, CSS, 이미지)들을 자바스크립트 모듈로 변환해 하나로 묶어 웹 성능을 향상시켜 주는 자바스크립트 모듈 번들러이다. 뷰 개발자들이 편하게 프로젝트를 구성할 수 있도록 CLI(Command Line Interface) 도구를 제공한다.

시작하기

$ vue create <project_name>

Vue CLI v3.11.0
┌───────────────────────────┐
│  Update available: 4.0.4  │
└───────────────────────────┘
? Please pick a preset: (Use arrow keys)
❯ default (babel, eslint)
  Manually select features

여기서 default를 선택하여 생성하게 되면 babel과 eslint가 설치된다. Manually select features를 선택하게 되면 아래와 같이 vuex, vue-router 등 몇가지를 더 선택할 수 있다.

? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to t
oggle all, <i> to invert selection)
❯◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◯ Router
 ◯ Vuex
 ◯ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

프로젝트를 하다가 추가적으로 plugin을 설치하고 싶은 경우에는 add를 통해 할 수 있다.

default 모드를 선택해 설치하게되면 다음과 같은 구조로 프로젝트가 생성된다.

.node_modules/
public/
        favicon.ico
        index.html
src/
    assets/
        logo.png
    components/
        HelloWorld.vue
    App.vue
    main.js
.gitignore
babel.config.js
package-lock.json
package.json
README.md

컴포넌트 같은 경우에는 src/components 폴더에서 관리한다. 애플리케이션 규모가 커져서 기능별로 관리를 해야하는 경우에는 components/기능/<컴포넌트명>.vue (components/login/LoginForm.vue)와 같은 형식으로 관리하는 것이 좋다.

$ vue add <plugin>

예를 들어서 axios 플러그인을 설치해볼것이다.

$ vue add axios
📦  Installing vue-cli-plugin-axios...

+ vue-cli-plugin-axios@0.0.4
added 1 package from 1 contributor in 4.648s
✔  Successfully installed plugin: vue-cli-plugin-axios


🚀  Invoking generator for vue-cli-plugin-axios...
📦  Installing additional dependencies...

added 5 packages from 8 contributors in 5.059s
⚓  Running completion hooks...

✔  Successfully invoked generator for plugin: vue-cli-plugin-axios
   The following files have been updated / added:

     src/plugins/axios.js
     package-lock.json
     package.json
     src/main.js

   You should review these changes with git diff and commit them.

axios 플러그인이 설치되고 난 후 수정된 파일과 새로 추가된 파일을 확인할 수 있다.

웹팩 설정 파일

vue-cli 3.x 에서는 웹팩 설정파일을 노출하지 않는다. 3.x에서는 설정을 추가하기 위해서는 root 디렉토리에 vue.config.js 파일을 설정하고 내용을 작성해준다.

// vue.config.js
module.exports = {
  // 여기에 옵션을 작성해준다.
}

vue ui

Vue-CLI3 UI를 통해서 프로젝트를 관리할 수 있다.

$ vue ui

위와 같이 실행하면 프로젝트 매니저가 localhost:8000으로 브라우저를 실행시킨다. 이 프로젝트 매니저 위에 프로젝트를 생성할 수 있으며, 이미 생성된 프로젝트를 불러와서 관리 포인트로 둘 수 있다.

프로젝트 실행

$ npm run serve

build

상용 배포를 위한 빌드를 진행할 수 있다.

$ npm run build

빌드를 실행하면 Vue CLI가 웹팩을 통해 프로젝트의 모든 소스 파일들을 번들링하여 dist 디렉토리에 넣어준다. dist 디렉토리를 확인해보면 웹팩이 번들링한 파일들을 확인할 수 있다. 이 파일들은 상용 배포에 적합하도록 웹팩이 최적화 해놓은 것이다.

참조

• Vue CLI

• [Vue.JS] Vue-CLI 3 시작하기