演習 - Vue.js を使用してアプリを作成する

  • 5 分

このユニットでは、HTML ファイルを使用してスターター Vue アプリケーションを作成します。 ファイルは、Vue コア ライブラリと、アプリケーションの詳細が含まれている外部の JavaScript ファイルにリンクされます。 1 つの Vue データ変数を定義し、それを HTML ページ内に動的に表示します。

スターター リポジトリをクローンする

アプリケーションのスターター サイトには、画像とベース スタイルが含まれます。 まず、リポジトリをクローンして、Visual Studio Code で開きます。

ターミナルまたはコマンド ウィンドウで、次のコマンドを実行します。

git clone https://github.com/MicrosoftDocs/mslearn-vue-get-started/
cd mslearn-vue-get-started/start
code .

コンテンツ配信ネットワーク (CDN) から Vue.js をインストールします。

  1. Visual Studio Code で、index.html を開きます。

  2. Vue コア ライブラリにリンクして Vue.js をインストールします。 スターター index.html ファイルの TODO: Import Vue.js core library コメントの下に、次のスクリプト タグを貼り付けます。

    <!-- TODO: Import Vue.js core library -->
<script src="https://unpkg.com/vue@next"></script>

Vue アプリケーション用の JavaScript ファイルを作成する

必要に応じて、HTML ファイル内で Vue スクリプトの作成を開始できます。 しかし、通常は、コードを別個の JavaScript ファイルに格納します。これにより、アプリケーションをより明確に管理することができます。

  1. index.js という名前の新しいファイルを作成します。

  2. 次のコードを index.js に追加して、アプリを作成します。

    const app = Vue.createApp({
    data() {
        return {
            productName: 'Book a Cruise to the Moon',
            productDescription: 'Cruise to the moon in our luxurious shuttle. Watch the astronauts working outside the International Space Station.',
            // additional properties later


        }
    },
});

    HTML ページの <head> タグに Vue.js ライブラリをインポートしたため、createApp() 関数を使用できます。 次に、この関数の引数を、data プロパティを持つオブジェクトとして渡します。 このオブジェクトは、データを保存するために使用する別のオブジェクトを返します。

アプリケーションをインポートしてマウントする

JavaScript コードを作成したので、アプリケーションをインポートしてマウントすることができます。

  1. index.html に戻ります。

  2. TODO: Import Vue app コメントの下に、次のスクリプトを追加します。

    <script src="./index.js"></script>
<script>
    app.mount('#app');
</script>

Vue アプリケーションを使用する

Vue アプリケーションを作成してインポートしたので、情報の表示を作成することができます。

index.html ファイルの TODO: Add information display コメントの下に、次の HTML を追加します。

<div id="app">
    <h2>{{ productName }}</h2>
    <div>{{ productDescription }}</div>
</div>

重要

Vue.js の処理では、ページの順序が重要です。 HTML ページが完全に読み込まれるまで、アプリケーションをドキュメント オブジェクト モデル (DOM) にアタッチすることはできません。 このため、他のすべての HTML 要素がブラウザーに読み込まれた後に、ページの下部に Vue アプリケーションをインポートします。 通常は、DOM のコンテンツまたは構造を変更することを目的とした外部スクリプト ファイルを呼び出す前に、HTML ページを読み込むようにすることをお勧めします。

Live Server を使用してページを開く

Visual Studio Code の Live Server 拡張機能を使用すると、変更が検出されたときにページを自動的に更新する開発用 Web サーバーを作成できます。 前述のリンクをたどって拡張機能をインストールします。 次に、それを使用してページをホストします。

  1. すべてのファイルを保存します。

  2. Ctrl + Shift + P キーを押して、Visual Studio Code でコマンド パレットを開きます。 Mac では、Cmd + Shift + P キーを押します。

  3. 「Live Server: Open with Live Server」と入力します。

    開いたダイアログ ボックスには、ページが現在 http://localhost:5500 でホストされていることが表示されます。

  4. ブラウザーを開き、http://localhost:5500 に移動します。

作成したページが表示されます。

Screenshot showing the newly created page.