アップデート直後のvueの使い方

Vue.js は人気のあるフロントエンド フレームワークであり、その最新バージョンである Vue 3.0 は 2020 年 9 月に正式にリリースされました。新しいバージョンでは、パフォーマンスの向上、TypeScript サポートの改善、コードの記述方法の簡素化など、いくつかの大きな変更が加えられています。この記事では初心者向けにVue.js 3.0の使い方を紹介します。

1. Vue.js 3.0 をインストールする

Vue 3.0 の使用を開始する前に、まず Vue.js をインストールする必要があります。 Vue 3.0 は npm 経由でインストールできます。

コンソール ウィンドウを開いて次のコマンドを入力します。

npm install vue@next

これにより、Vue.js 3.0 がローカルにインストールされます。次のコマンドを使用して、インストールされている Vue.js バージョンをいつでも確認できます:

vue --version

2. Vue.js アプリケーションを作成します

Vue CLI 4 を使用して新しい Vue を作成できます.jsアプリケーション。 Vue CLI 4 は、プロジェクトのスケルトンを生成し、すぐに使用できる構成を提供し、Vue.js アプリケーションを迅速に構築するのに役立つコマンド ライン インターフェイス ツールです。

Vue CLI 4 をインストールしていない場合は、コンソール ウィンドウを開いて次のコマンドを入力します。

npm install -g @vue/cli

インストール プロセス中に、管理者パスワードの入力を求められる場合があります。

インストールが完了したら、新しい Vue.js アプリケーションを作成できます。コンソール ウィンドウで次のコマンドを入力してください:

vue create my-vue-app

このコマンドは、「my-vue-app」という名前の新しいプロジェクトを作成します。プロジェクトの作成中に、デフォルト設定を使用するか、必要に応じて変更するかを選択できます。

3. Vue.js アプリケーションの実行

Vue.js アプリケーションの作成が完了したら、アプリケーションのルート ディレクトリに入り、次のコマンドを実行して開発サーバーを起動できます。 :

cd my-vue-app
npm run serve

このコマンドはローカル Web サービスを開始し、ローカル コンピューター上で Vue.js アプリケーションを実行できるようにします。

ブラウザに http://localhost:8080/ と入力してアプリケーションを開きます。

4. Vue.js アプリケーションの作成を開始する

これで、Vue.js アプリケーションの作成を開始する準備が整いました。 Vue.js 3.0 では、アプリケーションを定義する方法が以前とは少し異なります。

次は、ボタンを表示し、ボタンをクリックすると画面にメッセージが表示される簡単な例です。

<template>
  <div>
    <button @click="showMessage">显示消息</button>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import { reactive } from 'vue'

export default {
  setup() {
    const state = reactive({
      message: ''
    })

    function showMessage() {
      state.message = '欢迎来到 Vue 3.0!'
    }

    return {
      ...state,
      showMessage
    }
  }
}
</script>

このコードをコピーして、my- に貼り付けることができます。 vue -app/src/App.vue ファイルを選択し、ファイルを保存します。

アプリの実行中、ボタンが表示されます。ボタンをクリックすると、「Vue 3.0 へようこそ!」というメッセージが画面に表示されます。

5. 概要

Vue.js 3.0 では、フレームワークをより使いやすく、より効率的にするために多くの改善と変更が加えられています。この記事では、Vue 3.0 をインストールして使用する方法、および新しい Vue.js 3.0 構文を使用してアプリケーションを作成する方法について説明しました。この記事がお役に立てば幸いです。Vue.js 3.0 を使用して次の Web アプリケーションの構築を始めてください。

以上がアップデート直後のvueの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。