Vue は、インタラクティブな Web アプリケーションを作成するための人気のある JavaScript フレームワークです。開発者が柔軟で応答性が高く、再利用可能なコンポーネントを構築して開発効率を向上させるのに役立ちます。この記事では、Vue アプリケーションを構築する方法を詳しく見ていきます。まず Vue をインストールし、次に Vue コンポーネント、ルーティング、状態管理、Vue アプリケーションを構築するためのベスト プラクティスについて説明します。
ステップ 1: Vue をインストールする
始める前に、Vue をローカルにインストールする必要があります。 Vue は npm または Yarn を使用してインストールできます。コマンドの例は次のとおりです:
1 |
|
または
1 |
|
インストールが完了したら、Vue アプリケーションの構築を開始できます。
ステップ 2: Vue コンポーネントを作成する
Vue の中核はコンポーネントです。コンポーネントは、HTML、CSS、JavaScript を含めることができる再利用可能なコード ブロックです。 Vue コンポーネントの作成は非常に簡単です。以下は、簡単な Vue コンポーネントの例です。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
|
この例では、コンポーネントを作成し、コンポーネントのテンプレートで HTML を定義し、コンポーネントの JavaScript でデータを定義します。
ステップ 3: Vue ルーティングを作成する
複数ページの Vue アプリケーションを作成する場合は、Vue ルーティングが必要です。 Vue ルーティングは、URL パスを Vue コンポーネントにマッピングするためのライブラリです。 Vue ルーティングは、ページが 1 つしかないものの、異なるビュー間を切り替えることができるシングル ページ アプリケーション (SPA) の作成に役立ちます。
開始する前に、Vue ルーティングをインストールする必要があります。次のコマンドを使用して Vue ルーティングをインストールできます:
1 |
|
または
1 |
|
インストールが完了したら、Vue アプリケーションでルートを定義する必要があります。ルートを定義するサンプル コードは次のとおりです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
|
この例では、Home、About、Contact の 3 つのルートを定義します。各ルートはコンポーネントにマップされます。 URL パスがいずれかのルートと一致する場合、そのルートは対応するコンポーネントをレンダリングします。
ステップ 4: Vue 状態管理の作成
Vue 状態管理は、Vue アプリケーションの状態を管理するために使用されます。ステータスは、文字列、数値、オブジェクト、配列など、任意のタイプにすることができます。 Vue の状態管理には通常、Vuex ライブラリが使用されます。
始める前に、Vuex をインストールする必要があります。 Vuex は、次のコマンドを使用してインストールできます:
1 |
|
または
1 |
|
インストールが完了したら、Vue アプリケーションで状態を定義する必要があります。状態を定義するサンプル コードは次のとおりです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
|
この例では、「count」という名前の状態を定義し、「increment」という名前の変更メソッドを作成してこの状態を更新します。 「incrementCounter」という名前のアクション メソッドも作成され、コンポーネント内でこのメソッドを呼び出して突然変異をトリガーできるようになります。最後に、状態の現在の値を取得する「getCount」というゲッター メソッドを定義します。
ステップ 5: Vue アプリケーションを構築する
Vue アプリケーションを構築するには、Vue CLI (スキャフォールディング) を使用する必要があります。 Vue CLI は、新しい Vue プロジェクトの迅速な作成、Vue コンポーネントの構築、ローカル デバッグの実行、運用環境バージョンの生成に使用される公式 Vue.js コマンド ライン ツールです。
Vue CLI をインストールする前に、Node.js と npm をインストールする必要があります。次に、次のコマンドを使用して Vue CLI をインストールできます:
1 |
|
または
1 |
|
インストールが完了したら、Vue CLI を使用して新しい Vue プロジェクトを作成できます。次のコマンドを使用して、新しい Vue プロジェクトを作成します。
1 |
|
作成が完了したら、次のコマンドを使用して Vue アプリケーションを起動します。
1 2 |
|
あるいは、製品バージョンの Vue アプリケーションを使用することもできます。 Vue CLI を使用して構築できます。次のコマンドを使用して実稼働バージョンをビルドします。
1 |
|
ビルドが完了したら、生成されたファイルを Web サーバーにアップロードして実稼働環境で使用できます。
概要
この記事では、Vue アプリケーションを構築する方法を紹介しました。 Vue のインストールから始めて、Vue コンポーネント、ルーティング、状態管理、Vue アプリケーションを構築するためのベスト プラクティスについて説明しました。これらの手順を実行すると、強力で効率的で保守しやすい Vue アプリケーションを構築できます。
以上がVueアプリケーションを構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。