Vue CLI とカスタム コンポーネントの概要

  • 1 分

単一の JavaScript ファイルに Vue.js アプリケーション全体を作成することもできますが、小規模なアプリケーション以外では管理できなくなります。 アプリケーションをより小さな単位に分割することをサポートするために、Vue では "コンポーネント" を作成できます。 コンポーネントは再利用可能な構成要素であり、これによってアプリケーションを作成できます。

コンポーネントは、JavaScript ファイルとして作成することも、または拡張子が .vue の単一ファイル コンポーネントで作成することもできます。 単一ファイル コンポーネントでは、ブラウザーが読み取ることのできない特殊な構文が使用されます。 この構文は、適切な JavaScript、HTML、CSS に変換する必要があります。 特殊な構文をブラウザーが読み取ることができるものに変換するプロセスは、"バンドル" と呼ばれ、webpack などの追加ツールを必要とします。

幸い、Vue には、アプリケーションをブートストラップするために使用できるコマンドライン インターフェイス (CLI) も用意されています。 CLI によって、バンドラーや開発サーバーなど、必要なすべてのツールが構成されます。

このモジュールでは、次の方法について説明します。

  • Vue CLI を使用してアプリケーションを作成します。
  • 単一ファイル コンポーネントを作成します。
  • props を使用して、値をコンポーネントに渡します。

前提条件:

  • Vue.js の基本的な理解
  • HTML と CSS に関する知識
  • JavaScript の知識
  • Vue.js ディレクティブに関する知識
  • Visual Studio Code
  • Node.js

Note

このモジュールのソリューション コードを取得するには、コマンドまたはターミナル ウィンドウで次のコマンドを実行して、リポジトリを複製します。

git clone https://github.com/MicrosoftDocs/mslearn-vue-components
cd mslearn-vue-components/end
code .