ES2015

Когда vue-loader обнаруживает наличие babel-loader или buble-loader в том же проекте, он будет использовать их для обработки секций <script> всех *.vue файлов, позволяя использовать возможности ES2015 в компонентах Vue. Если вы ещё не использовали новые возможности языка, вам определённо стоит начать. Несколько хороших учебных ресурсов:

• Babel - Learn ES2015
• ES6 Features
• Exploring ES6 (book)

Например типичный шаблон, который вы видите при импорте других компонентов 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 в шаблонах

Секция <template> в *.vue файлах компилируется в render-функцию на JavaScript и потом обрабатывается собственной сборкой Buble для поддержки ES2015. Это позволяет вам использовать такие возможности как краткую запись свойства объекта и вычисляемые свойства:

<div :class="[{ active: active }, isButton ? prefix + '-button' : null]">

можно упростить до:

<div :class="{ active, [`${prefix}-button`]: isButton }">

только для версий vue@^2.1.0: Вы можете использовать деструктуризацию параметров в v-for или слотах с ограниченной областью видимости:

<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 чтобы обычные *.js файлы обрабатывались с помощью babel-loader или buble-loader. Проект созданный с помощью vue-cli уже настроен таким образом.

Настройка Babel с помощью .babelrc

babel-loader предпочитает .babelrc, поэтому рекомендуем использовать именно его для настройки пресетов и плагинов Babel.