ES2015
当项目中配置了 babel-loader 或者 buble-loader，vue-loader 会使用他们处理所有 .vue 文件中的 <script> 部分，允许我们在 Vue 组件中使用 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 会自动的将 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 和插件推荐的方法。