<Vue.js> 5. 단일파일 컴포넌트

Vue.js 단일파일 컴포넌트

1. 단일파일 컴포넌트

• 컴포넌트는 css 지원와 전처리기언어(Typescript 등)을 지원하지 않고 템플릿 정의하기 복잡(한파일에 너무 많이 존재)
• 단일파일 컴포넌트는 한파일에 템플릿과 스크립트, CSS를 가질 수 있기 떄문에 자바스크립트보다 명확하다.
• 다양한 전처리기 언어를 사용할 수 있고 .vue 확장자을 가진다.

2. 모듈번들러

• 여러 도구를 사용하기 위해서는 모듈번들러를 사용해야한다.
• 종류로는 webpack과 browerify가 있다.

3. vue-cli

• 단일파일 컴포넌트를 사용하기 위해서는 핵심 모듈인 vue-loader을 포함해 많은 모듈이 필요하다.
• vue-cliv는 부트스트랩 툴로 css컴파일, 전처리기, 배포 등을 생략하고 바로 시작할 수 있도록 지원한다.

3.1 디렉토리 구조

build // 빌드 관련 webpack 설정파일 등
config // 개발&배포 환경 설정 파일 등
src
|__ asserts // 이미지, 폰트 등
|__ components // 단일파일 컴포넌트
static  // 정적파일

3.2 단일파일 컴포넌트 작성법

• 3가지 Language Block 으로 이루어져 있다. (template, script, style)

<template>
  // 템플릿
</template>
 
<script>
export default {
  // export default는 ES6 문법이다. 내부에는 컴포넌트 옵션을 적어준다.
}
</script>
 
<style>
 // 스타일
</style>

4. 범위 CSS

• style 태그에 scoped를 추가하면 범위 CSS 를 사용할 수 있다.
• 해당 컴포넌트에 겹치지 않는 key가 추가 되면서 해당 컴포넌트에서만 사용할 수 있게 된다.

5. 외부 CSS 라이브러리

5.1 전처리기

• CSS를 먼저 처리하는 도구로 간단하고 구조적으로 작성할 수 있는 문법을 제공하고 자동으로 CSS파일을 생성한다.
• 종류로는 SCSS, LESS, Stylus 등이 있다.

5.2 후처리기

• CSS를 작성한 후에 처리하는 도구로 주로 PostCSS를 사용한다.

출처

• vue.js 이정도는 알아야지