Vueで簡単なチャットリストを実装する方法

ソーシャル ネットワークとインスタント メッセージングの継続的な人気に伴い、チャット機能もさまざまなアプリケーションの重要な機能の 1 つになりました。フロントエンド開発の分野では、Vue フレームワークを使用してチャット リストを実装するのが一般的です。この記事では、Vueを使って簡単なチャットリストを実装する方法を紹介します。

1. プロジェクトの構築

まず、Vue スキャフォールディング ツールを使用して Vue プロジェクトを構築する必要があります。コマンド ラインに次のコードを入力します。

vue create chat-app

これにより、「chat-app」という名前の Vue プロジェクトが作成されます。次に、Vue、Vue Router、Axios、Bootstrap などの必要な依存関係をインストールする必要があります。コマンド ラインに次のコードを入力します。

npm install vue vue-router axios bootstrap

2. ルートの作成

プロジェクト ルート ディレクトリの "src" フォルダーに "router.js" ファイルを作成します。コードは次のとおりです。

import Vue from 'vue';
import VueRouter from 'vue-router';
import ChatList from './components/ChatList.vue';
import ChatRoom from './components/ChatRoom.vue';

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    name: 'ChatList',
    component: ChatList
  },
  {
    path: '/chat-room/:id',
    name: 'ChatRoom',
    component: ChatRoom,
    props: true
  }
];

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
});

export default router;

ここでは 2 つのルートを作成しました。1 つは「/」パスの下のチャット リスト ページで、もう 1 つは「/chat-room/:」の下のチャット ルーム ページです。 ID」のパス。以下では、これらのコンポーネントの実装について 1 つずつ説明します。

3. チャット リスト コンポーネントの作成

プロジェクト ルート ディレクトリの "src/components" フォルダーに "ChatList.vue" ファイルを作成します。コードは次のとおりです。

このコンポーネントでは、Vue の「v-for」ディレクティブを使用して、「https://jsonplaceholder.typicode.com/users」から取得したユーザー リストを走査し、それをチャットリストページにレンダリングされます。ユーザーがリスト項目をクリックすると、「goToChatRoom」メソッドがトリガーされ、対応するチャット ルーム ページに移動します。

4. チャット ルーム コンポーネントの作成

プロジェクト ルート ディレクトリの "src/components" フォルダーに "ChatRoom.vue" ファイルを作成します。コードは次のとおりです。

このコンポーネントでは、現在のチャット ルームのチャット オブジェクトとメッセージ リストを取得し、それらをページにレンダリングします。ユーザーが新しいメッセージを送信できるフォームも追加しました。

5. テスト

最後に、プロジェクトのルート ディレクトリで次のコマンドを実行して開発サーバーを起動します:

npm run serve

ブラウザを開いて、「http://localhost」にアクセスします。 :8080」を見ると、先ほど作成したチャット一覧ページが表示されます。

リスト項目をクリックして、新しいページでチャットを開始してください。

6. 概要

この記事では、Vue フレームワークを使用して簡単なチャット リストを作成する方法を紹介します。 Axios を使用してリモート データを取得し、それをページにレンダリングします。これは単なる単純な例ですが、Vue でルーティングとコンポーネントを使用してパーソナライズされたチャット アプリケーションを実装する方法を示しています。この記事が Vue 初心者の方のお役に立てれば幸いです。

以上がVueで簡単なチャットリストを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。