ES2015

当vue-loader检测到在同一项目中存在babel-loader或buble-loader时，它将使用它们来处理所有*.vue文件的<script>部分，从而允许我们在Vue组件中使用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会自动将关键词转换为“component-a”，因此你可以使用<component-a>作为在模板中的导入组件。

在模板中使用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: 你甚至可以在v-for或作用域的插槽中使用使用参数解构：

  1. <li v-for="{ id, text } in items">
  2.   {{ id }} {{ text }}
  3. </li>
  1. <my-component>
  2.   <template scope="{ id, text }">
  3.     <span>{{ id }} {{ text }}</span>
  4.   </template>
  5. </my-component>

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

编译普通.js文件

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

通过 .babelrc文件配置babel转义

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