技術共有

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

皆さんこんにちは。今日は、Vue 3 を使用して AI 会話ページをゼロから構築する方法を検討します。このプロセスにより、Vue 3 の新機能を理解できるだけでなく、インタラクティブな Web アプリケーションの構築についても新たに理解できるようになります。プログラミングが初めての場合でも、心配しないでください。すべての手順を確実に実行できるように、わかりやすい言葉を使用します。

ステップ 1: Vue 3 プロジェクトをビルドする

まず、Vue 3 エンジニアリング環境をセットアップする必要があります。 Node.js と npm (ノード パッケージ マネージャー) がインストールされていることを前提としています。まだインストールされていない場合は、次の場所に進みます。ノードダウンロードしてインストールします。

コマンド ライン ツールを開き、次のコマンドを入力して新しい Vue 3 プロジェクトを作成します。

npm install -g @vue/cli vue create my-ai-chat-app

プロンプトに従って Vue 3 のプリセット オプションを選択し、プロジェクトが作成されるまで待ちます。

ステップ 2: プロジェクト構造の概要

作成が完了したら、my-ai-chat-appプロジェクトの基本構造は次のとおりです。

my-ai-chat-app
│   README.md
│   package.json
│
├───node_modules
├───public
└───src
    │   App.vue
    │   main.js
    │
    ├───assets
    ├───components

        │   ChatInput.vue
    ├───router

        │   index.js
    ├───store
    └───views

        │   Chat.vue

ステップ 3: AI ダイアログ ページを作成する

次にAI会話ページのコアコードを書いていきます。まずは開けてみましょうsrc/App.vueファイル、これはエントリコンポーネントファイルです。

<template>
  <div id="app">
    <router-view />
  </div>
</template>

このテンプレートは非常にシンプルで、含まれているのはrouter-view、これは、一致するルート コンポーネントをレンダリングするために使用される Vue Router のプレースホルダーです。

ChatInput コンポーネント

ここで、ChatInput.vueメッセージを送信するためのコンポーネント。開けるsrc/components/ChatInput.vueファイルを開き、次のコードを追加します。

<template>
  <div>
    <!-- 消息展示 -->
    <div>{{ message.text }}</div>
    <!-- 输入框 -->
    <input v-model="message.text" placeholder="Type a message">
    <!-- 发送按钮 -->
    <button @click="sendMessage">Send</button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      message: {
        text: ''
      }
    };
  },
  methods: {
    sendMessage() {
      // 这里将添加发送消息的逻辑
      console.log('Sending message:', this.message.text);
      this.message.text = ''; // 清空输入框
    }
  }
};
</script>

このコンポーネントにはデータモデルがありますmessage、が含まれていますtext入力ボックスをバインドするために使用されるプロパティ。まだ1つありますsendMessageメッセージ送信ロジックを処理するために使用されるメソッド。

main.jsの設定

最後に、次のことを行う必要があります。src/main.jsVue Router と Vuex の導入と使用、およびAppコンポーネント。

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
 
createApp(App).use(store).use(router).mount('#app');

ここでは、Vue 3 の Comboposition API を使用します。createAppアプリケーションインスタンスを作成して使用する関数use方法はVue RouterとVuexをインストールしました。

ステップ 4: Vue 3 アプリケーションを実行する方法

AI 会話ページの準備ができたので、次のステップはそれを実行する方法です。

1. コマンド ライン ツールを開き、プロジェクト ディレクトリに移動します。
2. 次のコマンドを実行して開発サーバーを起動します。

npm run serve

コマンドを実行すると、通常は次の出力が表示され、パスを要求するプロンプトが表示されます。localhostアプリケーションにアクセスするためのアドレス:

DONE Compiled successfully in Xms App running at: - Local: http://localhost:8080/ - Network: http://<network-address>:8080/

ブラウザを開いてアクセスしてくださいhttp://localhost:8080/, AI 会話ページが表示されます。

完全なコードをリクエストする方法

プロジェクト全体の構造とロジックをよりよく理解するために完全なコードを入手したい場合は、次の点を確認してください。コメント欄にメールアドレスを残してください。

結論

今日は、Vue 3 を使用して簡単な AI 会話ページを作成する方法を学びました。これは静的ページ効果の単なる紹介です。大規模モデルにアクセスして実際の AI 対話機能を実現する方法については、私が書いたこの記事を参照してください。AI対話WeChatアプレットをコストゼロで作成する方法（ソースコード添付）