ES2015

当项目中配置了 babel-loader 或者 buble-loader，vue-loader 会使用他们处理所有 .vue 文件中的 <script> 部分，允许我们在 Vue 组件中使用 ES2015，如果你还没有使用 ES2015，你应该使用它，这有一些不错的学习资源：

• 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 会自动的将 key 转换为component-a，所以你可以在 template 中使用 <component-a>。

在 Templates 中使用 ES2015

.vue 中的 <template> 会编译为 JavaScript 渲染函数，然后通过自定义构建的 Buble 去支持 ES2015，这允许你使用属性的简洁表示法和属性名表达式：

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

可以简写为：

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

vue@^2.1.0 only: 你可以在 v-for 或者 scoped 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>

你还可以使用 buble 选项自定义模板中支持的功能。

转换普通 .js 文件

由于 vue-loader 只处理 .vue 文件，你需要告诉 webpack 如何使用 babel-loader 或者 buble-loader 处理普通 .js 文件，在 webpack 中配置 babel-loader 或者 buble-loader。脚手架工具 vue-cli 已经为你做了这些。

使用 .babelrc 配置 Babel

babel-loader 遵守 .babelrc，因此这是配置 Babel presets 和插件推荐的方法。