미래 대화 구축: 처음부터 Vue 3 기반 AI 채팅 페이지 구현

미래 대화 구축: Vue 3 기반 AI 채팅 페이지를 처음부터 구현

2024-07-12

안녕하세요 여러분, 오늘은 Vue 3를 사용하여 처음부터 AI 대화 페이지를 구축하는 방법을 살펴보겠습니다. 이 프로세스를 통해 Vue 3의 새로운 기능을 이해할 수 있을 뿐만 아니라 대화형 웹 애플리케이션 구축에 대한 새로운 이해도 얻을 수 있습니다. 프로그래밍이 처음이시더라도 걱정하지 마세요. 이해하기 쉬운 언어를 사용하여 모든 단계를 따라갈 수 있도록 도와드리겠습니다.

1단계: Vue 3 프로젝트 빌드

먼저 Vue 3 엔지니어링 환경을 설정해야 합니다. Node.js와 npm(노드 패키지 관리자)이 설치되어 있다고 가정합니다.아직 설치되지 않은 경우 다음으로 이동하세요.노드js.org다운로드하여 설치하세요.

명령줄 도구를 열고 다음 명령을 입력하여 새 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 입력 상자를 바인딩하는 데 사용되는 속성입니다.아직 하나 있어요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의 Composition API를 사용합니다.createApp애플리케이션 인스턴스를 생성하고 사용하는 함수use메소드는 Vue Router 및 Vuex를 설치했습니다.

4단계: Vue 3 애플리케이션을 실행하는 방법

이제 AI 대화 페이지가 준비되었으므로 다음 단계는 이를 실행하는 방법입니다.

명령줄 도구를 열고 프로젝트 디렉터리로 이동합니다.
다음 명령을 실행하여 개발 서버를 시작합니다.

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 대화 위챗 애플릿을 무료로 만드는 방법(소스코드 첨부)

기술나눔