v3.x のドキュメントを見たい場合はこちら

ガイド

v2.x 以前のドキュメントです。 v3.x のドキュメントを見たい場合はこちら

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

最終更新日: 2019年9月22日

前書き

Vue School で無料の動画レッスンを見る

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

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

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

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

Single-file component example (click for code as text)

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

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

Single-file component example with preprocessors (click for code as text)

これらの特定の言語は単なる一例です。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>

はじめる

サンドボックスの例

すぐに触ってそして単一ファイルコンポーネントを試したい場合は、CodeSandbox 上のこの単純な todo アプリケーション をチェックしてください。

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

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

これらのリソースに没頭した後は、 Vue CLI 3 を確認することをお勧めします。手順に沿って学習することで、あっという間に .vue コンポーネントと ES2015、Webpack、ホットリローディングをそなえた Vue プロジェクトを手に入れられるはずです！

上級者ユーザー向け

CLI はツール設定の大部分の面倒を見てくれますが、 設定オプション を通してきめ細かなカスタマイズをすることもできます。

あなたが独自のビルドセットアップをゼロから作ることを好む場合、webpack と vue-loader を手動で設定する必要があるでしょう。webpack 自体についてさらに学ぶには、公式ドキュメントや Webpack Academy を参照してください。

← フィルター テスト →
間違いを見つけた、またはドキュメントに貢献したいですか？ GitHub で編集しましょう！ このサイトは Netlify でホストされています。