ES2015
vue-loader가 babel-loader 또는 buble-loader을 같은 프로젝트 내에서 감지된다면 모든 *.vue 파일들의 <script> 부분에서 ES2015를 사용합니다. 아직 ES2015에 대해서 잘 모른다면 여기 좋은 링크가 있습니다.
다음은 다른 Vue 컴포넌트를 가져올 때 볼 수 있는 기본적인 패턴입니다.
<script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'
export default {
components: {
ComponentA,
ComponentB
}
}
</script>
여기서는 ES2015의 오브젝트 리터럴을 사용하여 하위 컴포넌트를 구성합니다. { ComponentA }는 { ComponentA: ComponentA }의 줄임말 입니다. Vue는 키를 자동으로 component-a로 변환하기 때문에 템플릿에서 가져온 컴포넌트를 <component-a>로 사용할 수 있습니다.
템플릿의 ES2015
*.vue파일의 <template>는 JavaScript 렌더링 함수로 컴파일 된 다음 Buble의 사용자 정의 빌드로 처리되어 ES2015 기능을 지원합니다. 이를 통해 객체 약어 속성과 계산된 속성과 같은 기능을 이용할 수 있습니다.
<div :class="[{ active: active }, isButton ? prefix + '-button' : null]">
다음과 같이 간단하게 사용 가능합니다.
<div :class="{ active, [`${prefix}-button`]: isButton }">
vue@^2.1.0만 가능합니다: v-for 또는 범위를 가지는 slot을 사용하여 매개 변수 소멸을 사용할 수도 있습니다.
<li v-for="{ id, text } in items">
{{ id }} {{ text }}
</li>
<my-component>
<template slot-scope="{ id, text }">
<span>{{ id }} {{ text }}</span>
</template>
</my-component>
buble 옵션을 사용하여 템플릿에서 지원되는 기능을 커스터마이징 할 수 있습니다.
일반적인 .js 파일로 변환하기
vue-loader는 오직 *.vue 파일만 처리하기 때문에 webpack 설정 파일에 babel-loader 또는 buble-loader를 사용하여 보통 *.js 파일을 처리하도록 지시해야 합니다. vue-cli로 스캐폴딩된 프로젝트는 이미 당신을 위해 그렇게 설정되어 있습니다.
.babelrc로 Babel 설정하기
babel-loader는 .babelrc를 우선하므로 Babel 설정과 플러그인을 구성하는데 권장되는 방법입니다.