単一ファイルコンポーネント

最終更新日: 2017年6月26日

前書き

多くの Vue プロジェクトでは、グローバルコンポーネントは、new Vue({ el: '#container '}) の後に各ページの body においてコンテナ要素をターゲットにすることに続いて、Vue.component を使用して定義されています。

これは view を拡張するだけに利用された小さな中規模プロジェクトにおいてはとても有効です。 あなたのフロントエンドで JavaScript 全体を操作するようなもっと複雑なプロジェクトでは、これらの点において不利益になることは明白です。:

これら全ては Webpack や Browserify のビルドツールにより実現された .vue 拡張子の 単一ファイルコンポーネント で解決します。

こちらが Hello.vue と呼ばれたファイルの単純な例です:

さて次にこちらに入ります:

約束したとおり、 Pug、 Babel(ES2015 モジュールと一緒に)や Stylus などより美しくかつ機能が豊富なコンポーネントもプリプロセッサとして利用できます。

これらの特定の言語は単なる一例です。Buble 、TypeScript 、SCSS 、PostCSS などの生産的なプリプロセッサも簡単に使うことができます。vue-loader で Webpack を使用しているならば、CSS Modules 向けに素晴らしいサポートがあります。

関心の分離について

注意すべき重要な点の1つは、関心事項の分離がファイルタイプの分離と等しくないことです。 現代の UI 開発では、コードベースを互いに織り交ぜる3つの巨大なレイヤーに分割するのではなく、それらを疎結合なコンポーネントに分割して構成する方がはるかに理にかなっています。コンポーネントの内部では、そのテンプレート、ロジック、スタイルが本質的に結合されており、実際にそれらを配置することで、コンポーネントがより一貫性と保守性に優れています。

単一ファイルコンポーネントのアイデアが気に入らなくても、JavaScript と CSS を別々のファイルに分けることで、ホットリロードとプリコンパイル機能を活用できます:

<!-- my-component.vue -->
<template>
<div>This will be pre-compiled</div>
</template>
<script src="./my-component.js"></script>
<style src="./my-component.css"></style>

始める

JavaScript でモジュールビルドシステムが初めてなユーザー向け

.vue コンポーネントにより、高度な JavaScript アプリケーションの分野に入っていきます。これはあなたがまだ使ったことのない、いくつかの追加ツールの使い方を学ぶことを意味します。

これらのリソースに没頭した後は、 webpack-simple テンプレートを確認することをお勧めします。手順に沿って学習することで、あっという間に ES2015 とホットリローディングで動作した .vue コンポーネントの Vue プロジェクトを持っているはずです!

テンプレートでは、多数の”モジュール”を取りまとめ最終的なアプリケーションに束ねてくれる Webpack というモジュールバンドラーを使用します。 Webpack についてもっと学ぶには、 このビデオ がとても良い導入となります。一度基本を終えてしまえば、Egghead.io 上の上級 Webpack コースもチェックしたくなるでしょう。

Webpack で、各モジュールは、バンドルに含まれる前に “loader” により変換されます。また Vue では .vue 単一ファイルコンポーネントをコンパイルするために vue-loader を推奨しています。 webpack-simple テンプレートはあなたのために全てセットアップ済みの状態で用意してありますが、もし Webpack と .vue コンポーネントについてもっと学びたい場合は、vue-loader ドキュメント を読むこともできます。

上級者ユーザー向け

あなたが Webpack か Browserify のどちらが好みでも、私達はシンプルなものと、複雑なプロジェクトのテンプレート両方を用意しました。github.com/vuejs-templates を閲覧し、あなたに合ったテンプレートを選んでください。そうしたら、vue-cli で新しいプロジェクトを生成するために README 内の手順に沿ってください。