Vueアプリケーションを構築する方法

Vue は、インタラクティブな Web アプリケーションを作成するための人気のある JavaScript フレームワークです。開発者が柔軟で応答性が高く、再利用可能なコンポーネントを構築して開発効率を向上させるのに役立ちます。この記事では、Vue アプリケーションを構築する方法を詳しく見ていきます。まず Vue をインストールし、次に Vue コンポーネント、ルーティング、状態管理、Vue アプリケーションを構築するためのベスト プラクティスについて説明します。

ステップ 1: Vue をインストールする

始める前に、Vue をローカルにインストールする必要があります。 Vue は npm または Yarn を使用してインストールできます。コマンドの例は次のとおりです:

npm install vue

または

yarn add vue

インストールが完了したら、Vue アプリケーションの構築を開始できます。

ステップ 2: Vue コンポーネントを作成する

Vue の中核はコンポーネントです。コンポーネントは、HTML、CSS、JavaScript を含めることができる再利用可能なコード ブロックです。 Vue コンポーネントの作成は非常に簡単です。以下は、簡単な Vue コンポーネントの例です。

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        title: '欢迎来到Vue应用程序',
        message: '这是一个Vue应用程序的示例'
      }
    }
  }
</script>

<style scoped>
  h1 {
    font-size: 2em;
    color: #42b983;
  }
</style>

この例では、コンポーネントを作成し、コンポーネントのテンプレートで HTML を定義し、コンポーネントの JavaScript でデータを定義します。

ステップ 3: Vue ルーティングを作成する

複数ページの Vue アプリケーションを作成する場合は、Vue ルーティングが必要です。 Vue ルーティングは、URL パスを Vue コンポーネントにマッピングするためのライブラリです。 Vue ルーティングは、ページが 1 つしかないものの、異なるビュー間を切り替えることができるシングル ページ アプリケーション (SPA) の作成に役立ちます。

開始する前に、Vue ルーティングをインストールする必要があります。次のコマンドを使用して Vue ルーティングをインストールできます:

npm install vue-router

または

yarn add vue-router

インストールが完了したら、Vue アプリケーションでルートを定義する必要があります。ルートを定義するサンプル コードは次のとおりです。

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    },
    {
      path: '/contact',
      name: 'Contact',
      component: Contact
    }
  ]
})

この例では、Home、About、Contact の 3 つのルートを定義します。各ルートはコンポーネントにマップされます。 URL パスがいずれかのルートと一致する場合、そのルートは対応するコンポーネントをレンダリングします。

ステップ 4: Vue 状態管理の作成

Vue 状態管理は、Vue アプリケーションの状態を管理するために使用されます。ステータスは、文字列、数値、オブジェクト、配列など、任意のタイプにすることができます。 Vue の状態管理には通常、Vuex ライブラリが使用されます。

始める前に、Vuex をインストールする必要があります。 Vuex は、次のコマンドを使用してインストールできます:

npm install vuex

または

yarn add vuex

インストールが完了したら、Vue アプリケーションで状態を定義する必要があります。状態を定義するサンプル コードは次のとおりです。

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    incrementCounter ({commit}) {
      commit('increment')
    }
  },
  getters: {
    getCount: state => state.count
  }
})

この例では、「count」という名前の状態を定義し、「increment」という名前の変更メソッドを作成してこの状態を更新します。 「incrementCounter」という名前のアクション メソッドも作成され、コンポーネント内でこのメソッドを呼び出して突然変異をトリガーできるようになります。最後に、状態の現在の値を取得する「getCount」というゲッター メソッドを定義します。

ステップ 5: Vue アプリケーションを構築する

Vue アプリケーションを構築するには、Vue CLI (スキャフォールディング) を使用する必要があります。 Vue CLI は、新しい Vue プロジェクトの迅速な作成、Vue コンポーネントの構築、ローカル デバッグの実行、運用環境バージョンの生成に使用される公式 Vue.js コマンド ライン ツールです。

Vue CLI をインストールする前に、Node.js と npm をインストールする必要があります。次に、次のコマンドを使用して Vue CLI をインストールできます:

npm install -g @vue/cli

または

yarn global add @vue/cli

インストールが完了したら、Vue CLI を使用して新しい Vue プロジェクトを作成できます。次のコマンドを使用して、新しい Vue プロジェクトを作成します。

vue create my-project

作成が完了したら、次のコマンドを使用して Vue アプリケーションを起動します。

cd my-project
npm run serve

あるいは、製品バージョンの Vue アプリケーションを使用することもできます。 Vue CLI を使用して構築できます。次のコマンドを使用して実稼働バージョンをビルドします。

npm run build

ビルドが完了したら、生成されたファイルを Web サーバーにアップロードして実稼働環境で使用できます。

概要

この記事では、Vue アプリケーションを構築する方法を紹介しました。 Vue のインストールから始めて、Vue コンポーネント、ルーティング、状態管理、Vue アプリケーションを構築するためのベスト プラクティスについて説明しました。これらの手順を実行すると、強力で効率的で保守しやすい Vue アプリケーションを構築できます。

以上がVueアプリケーションを構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。