ホームページ > ウェブフロントエンド > フロントエンドQ&A > Vueアプリケーションを構築する方法

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

王林
リリース: 2023-05-24 11:17:07
オリジナル
930 人が閲覧しました

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

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

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

1

npm install vue

ログイン後にコピー

または

1

yarn add vue

ログイン後にコピー

インストールが完了したら、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

<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 ルーティングをインストールできます:

1

npm install vue-router

ログイン後にコピー

または

1

yarn add vue-router

ログイン後にコピー

インストールが完了したら、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

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 は、次のコマンドを使用してインストールできます:

1

npm install vuex

ログイン後にコピー

または

1

yarn add vuex

ログイン後にコピー

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

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 をインストールできます:

1

npm install -g @vue/cli

ログイン後にコピー

または

1

yarn global add @vue/cli

ログイン後にコピー

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

1

vue create my-project

ログイン後にコピー

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

1

2

cd my-project

npm run serve

ログイン後にコピー

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

1

npm run build

ログイン後にコピー

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

概要

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

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

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート