1-1

本章で学ぶこと

本章ではVueCLIを使ってVueプロジェクトの作成を行い、プロジェクト構成を確認しながらVue実装に必要な概念の学習を行っていきます。

各パートで学ぶこと

プロジェクトデータの置き場所となる作業ディレクトリを作成し、VueCLIを使ってVueプロジェクトを作成していきます。

プロジェクト作成時に自動で作成されたフォルダやファイルを1つずつ確認し、それぞれがどのような役割なのかを学習していきます。

実行前にVue設定ファイルを1つ作成し、コマンドラインツールを使って開発サーバを起動します。開発サーバ起動中はブラウザで作成したページが確認できるようになります。

自動で作成されたファイルに変更を加え、本教材のベースとなるようプロジェクトを作りかえます。

作成した.vueファイル内を確認しながら、Vueコードがtemplate, script, styleの3つの部品で構成されていることを学習します。

Vueで重要な概念である「コンポーネント」とは何かを学習し、コンポーネントを使うために必要なコードの構成を確認します。

本章が終了した時点でのソースコードは下記リンクとなります。途中で詰まってしまった際、お手元のコードとの比較にご活用ください。