You will be fine

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

by BFine
반응형

Vue.js 단일파일 컴포넌트

1. 단일파일 컴포넌트

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

2. 모듈번들러

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

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를 사용한다.

출처

반응형

'공부(2018~2019) - 스킨변경전 > Vue.js' 카테고리의 다른 글

<Vue.js> 4. 컴포넌트  (0) 2019.05.31
<Vue.js> 3. 템플릿 문법(2)  (0) 2019.05.25
<Vue.js> 2. 템플릿 문법(1)  (0) 2019.05.23
<Vue.js> 1. 인스턴스  (0) 2019.05.22

블로그의 정보

57개월 BackEnd

BFine

활동하기