ES2015

当vue-loader检测到在同一项目中存在babel-loader或buble-loader时，它将使用它们来处理所有*.vue文件的<script>部分，从而允许我们在Vue组件中使用ES2015。 如果你还没有掌握这些新的语言特性，你应该去学习一下了。下面是一些好的学习资源：

• Babel-学习 ES2015
• ES6 新特性
• 探索 ES6 (书籍)

下面是导入其他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

*.vue文件中的<template>被编译为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 scope="{ id, text }">
    <span>{{ id }} {{ text }}</span>
  </template>
</my-component>

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

编译普通.js文件

因为vue-loader只处理* .vue文件，你需要在Webpack配置文件中用babel-loader'或buble-loader告诉Webpack处理正常的* .js文件。 用vue-cli`搭建的项目已经为你做了。

通过 .babelrc文件配置babel转义

babel-loader遵循.babelrc规范，因此这是推荐的配置Babel预设和插件的方法。