ES2015

同一プロジェクト内で babel-loader か buble-loader を検出したとき、全ての *.vue ファイルの <script> タグを処理するためにそれらを使用し Vue コンポーネント内で 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 は自動でキーを component-a に変換し、インポートされたコンポーネントをテンプレート内で <component-a> として使用することが出来ます。

テンプレート内のES2015

*.vue ファイル内の <template> は JavaScript の render 関数にコンパイルされBuble のカスタムビルドで処理され ES2015 の機能をサポートします。これにより Object shorthand properties と算出プロパティなどの機能が使用できるようになります:

<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 slot-scope="{ id, text }">
    <span>{{ id }} {{ text }}</span>
  </template>
</my-component>

buble オプションを使用してテンプレートでサポートされた機能をカスタマイズすることが出来ます。

.js ファイルのトランスパイル

vue-loader は *.vue ファイルのみ処理するので、webpack の設定ファイルに babel-loader または buble-loader を使って *.js ファイルを処理するように Webapck に指示する必要があります。 vue-cli でプロジェクトを作成しているとすでにそれは用意されています。

.babelrc による Babel の設定

babel-loader は .babelrcを遵守しているので、Babel のプリセットとプラグインで設定することが推奨されています。