ES2015

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

下面是导入其它 Vue 组件的典型写法：

  1. <script>
  2. import ComponentA from './ComponentA.vue'
  3. import ComponentB from './ComponentB.vue'
  5. export default {
  6.   components: {
  7.     ComponentA,
  8.     ComponentB
  9.   }
  10. }
  11. </script>

我们使用 ES2015 的属性的简洁表示法去定义子组件，{ ComponentA } 是 { ComponentA: ComponentA } 的简写，Vue 会自动的将 key 转换为component-a，所以你可以在 template 中使用 <component-a>。

在 Templates 中使用 ES2015

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

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

可以简写为：

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

vue@^2.1.0 only: 你可以在 v-for 或者 scoped slots 中使用解构赋值：

  1. <li v-for="{ id, text } in items">
  2.   {{ id }} {{ text }}
  3. </li>
  1. <my-component>
  2.   <template slot-scope="{ id, text }">
  3.     <span>{{ id }} {{ text }}</span>
  4.   </template>
  5. </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 和插件推荐的方法。

原文: https://vue-loader-v14.vuejs.org/zh-cn/features/es2015.html