Vue 3.0 でプロジェクトをビルドする方法

Vue3.0 の正式バージョンは 2020 年 9 月にリリースされ、多くの改良が加えられ、開発者がより柔軟かつ効率的に Vue アプリケーションを作成できるようになりました。この記事では、Vue 3.0 でプロジェクトを構築する方法を学びます。

1. Vue CLI のインストール

まず、Vue CLI をローカルにインストールする必要があります。 Vue CLI は、Vue が公式に提供するスキャフォールディング ツールで、Vue アプリケーションのテンプレートを迅速に生成するために使用されます。

コマンド ラインで次のコマンドを実行して Vue CLI をインストールします:

npm install -g @vue/cli

2. Vue プロジェクトの作成

Vue CLI をインストールした後、それを使用できるようになります。 Vue プロジェクトを迅速に作成するためのコマンドを提供します。

コマンド ラインで次のコマンドを実行して、新しい Vue 3.0 プロジェクトを作成します。

vue create my-project

ここで、my-project はプロジェクト名です。

上記のコマンドを実行すると、Vue CLI により、インストールする機能を選択するように求められます。上矢印キーと下矢印キーを使用してプロパティを選択し、スペースバーを使用してプロパティを選択/選択解除できます。デフォルトの構成を選択できます。

3. Vue プロジェクトの実行

Vue プロジェクトを作成した後、次のコマンドを使用してアプリケーションを開始できます:

npm run serve

このコマンドはコンパイルされます。プロジェクトを作成し、ローカルサーバーを起動します。サーバーが起動したら、ブラウザで http://localhost:8080 にアクセスしてアプリケーションにアクセスできます。

4. Vue コンポーネントの記述

Vue 3.0 では、コンポーネントの記述方法が Vue 2.x とは異なります。 Vue 3.0 のコンポーネントは、Vue 2.x の単一ファイル コンポーネントではなく、単一の setup() 関数で構成されています。

以下は簡単な Vue 3.0 コンポーネントの例です:

<template>
  <div>{{ message }}</div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const message = ref('Hello, Vue 3!')
    return {
      message
    }
  }
}
</script>

ご覧のとおり、setup() 関数を使用してコンポーネントの論理部分を作成し、応答性の ref( Vue 3.0の)機能。

5. API との対話

Vue 3.0 では、Vue が提供する 2 つの新しい API (Composition API と API と対話するための API) を使用できます。 Comboposition API は、コンポーネントのコードを記述して整理するためのより便利な方法を提供し、API は Vue インスタンスと直接対話する機能を提供します。

次は、Composition API を使用して API と対話する例です:

<template>
  <div>{{ message }}</div>
</template>

<script>
import { ref, onMounted } from 'vue'
import Axios from 'axios'

export default {
  setup() {
    const message = ref('')
    onMounted(() => {
      Axios.get('https://jsonplaceholder.typicode.com/posts/1').then(response => {
        message.value = response.data.title
      })
    })
    return {
      message
    }
  }
}
</script>

上の例では、ref() 関数と onMounted() 関数を使用してリアクティブ メッセージを作成しました変数を取得し、コンポーネントのマウント時に Axios を使用して API データを取得し、返されたタイトルをメッセージ変数に割り当てます。

6. 結論

Vue 3.0 は多くの改善と新機能をもたらし、Vue アプリケーション開発をより効率的かつ柔軟にします。この記事では、Vue CLI を使用して Vue 3.0 プロジェクトを迅速に作成する方法を学び、Vue 3.0 でのコンポーネントの作成方法と API 対話方法を示すための簡単な Vue コンポーネントを作成しました。

以上がVue 3.0 でプロジェクトをビルドする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。