构建未来对话：从零开始实现基于Vue 3的AI聊天页面

<template>
  <div class="chat-container">
    <div class="messages">
      <div v-for="message in messages" :key="message.id" class="message">
        <div class="message-content" :class="{ user: message.user }">
          {{ message.content }}
        </div>
      </div>
    </div>
    <form @submit.prevent="submitMessage">
      <input v-model="userMessage" type="text" placeholder="Enter your message" />
      <button type="submit">Send</button>
    </form>
  </div>
</template>
 
<script>
import { ref } from 'vue';
 
export default {
  setup() {
    const messages = ref([]);
    const userMessage = ref('');
 
    function submitMessage() {
      if (userMessage.value.trim() === '') {
        alert('Please enter a message.');
        return;
      }
      messages.value.push({
        id: Date.now(),
        content: userMessage.value,
        user: true
      });
      userMessage.value = '';
    }
 
    return { messages, userMessage, submitMessage };
  }
};
</script>
 
<style scoped>
.chat-container {
  max-width: 600px;
  margin: 0 auto;
}
.messages {
  padding: 10px;
  background: #f1f1f1;
  border-radius: 5px;
  overflow-y: scroll;
  height: 400px;
}
.message {
  clear: both;
  margin-bottom: 10px;
  padding: 5px;
  background: white;
  border-radius: 5px;
  position: relative;
}
.message-content {
  float: left;
  margin-left: 10px;
  border-radius: 5px;
}
.message-content.user {
  background: #007bff;
  color: white;
}
input {
  width: 100%;
  padding: 10px;
  margin-top: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
form {
  margin-top: 10px;
  display: flex;
}
button {
  padding: 10px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
</style>

这个简单的Vue 3组件实现了一个基本的聊天界面，包括发送和接收消息的功能。它使用了Vue 3的Composition API（setup函数），并通过ref函数创建响应式数据。这个例子教会开发者如何在Vue 3中构建一个基本的聊天界面，并展示了如何使用Vue的响应式系统来处理用户的输入。