ES2015
Quando vue-loader detecta a presença de babel-loader ou buble-loader no mesmo projeto, ele irá usá-los para processar pedaços <script> de todos os arquivos *.vue, permitindo-nos usar ES2015 em nossos componentes Vue. Se você ainda não conhece estes novos recursos, você definitivamente deve. Alguns bons recursos para aprendizagem:
Aqui está um padrão típico que você irá ver quando importar outros componentes Vue:
<script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'
export default {
components: {
ComponentA,
ComponentB
}
}
</script>
Estamos usando a abreviação de objeto literal do ES2015 para definir componentes filho. { ComponentA } é simplesmente uma abreviatura para { ComponentA: ComponentA }. Vue irá automaticamente converter a chave para component-a, então você pode usar o componente importado no template como <component-a>.
ES2015 em Templates
<template> em arquivos *.vue são compilados em funções de renderização do JavaScript e então processados por uma compilação personalizada de Buble para suportar características ES2015. Isso permite que você use recursos como propriedade de abreviatura do objeto e propriedades computadas:
<div :class="[{ active: active }, isButton ? prefix + '-button' : null]">
Pode ser simplificado para:
<div :class="{ active, [`${prefix}-button`]: isButton }">
vue@^2.1.0 somente: você pode usar desestruturação de parâmetro com v-for ou escopo de slots:
<li v-for="{ id, text } in items">
{{ id }} {{ text }}
</li>
<my-component>
<template slot-scope="{ id, text }">
<span>{{ id }} {{ text }}</span>
</template>
</my-component>
Você também pode personalizar os recursos suportados em template usando as opções de buble.
Transpilação normal de arquivos .js
Uma vez que vue-loader processa apenas arquivos *.vue, você precisa informar ao webpack para processar arquivos *.js normais com babel-loader ou buble-loader em seu arquivo de configuração webpack. O projeto esqueleto criado com vue-cli já faz isso pra você.
Configurando Babel com .babelrc
babel-loader respeita .babelrc, portanto essa é a abordagem recomentada para configurar as predefinições e os plugins Babel.