vue3写一个聊天界面

首先，你需要安装Vue.js和Vue CLI，然后创建一个新项目。接下来，你可以使用Vue组件来构建聊天界面。

下面是一个简单的聊天界面组件：

<template>
  <div class="chat">
    <div class="chat-header">
      <h2>Chat Room</h2>
    </div>
    <div class="chat-messages">
      <div v-for="message in messages" :key="message.id" class="message">
        <div class="message-author">{{ message.author }}</div>
        <div class="message-body">{{ message.body }}</div>
      </div>
    </div>
    <div class="chat-input">
      <input v-model="newMessage" @keydown.enter="sendMessage" placeholder="Type your message...">
      <button @click="sendMessage">Send</button>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        messages: [
          { id: 1, author: 'User 1', body: 'Hi there!' },
          { id: 2, author: 'User 2', body: 'Hello!' },
          { id: 3, author: 'User 1', body: 'How are you?' },
        ],
        newMessage: '',
      }
    },
    methods: {
      sendMessage() {
        if (!this.newMessage) return;
        this.messages.push({
          id: this.messages.length + 1,
          author: 'User 1',
          body: this.newMessage,
        });
        this.newMessage = '';
      },
    },
  }
</script>

<style>
  .chat {
    display: flex;
    flex-direction: column;
    width: 400px;
    height: 500px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
  }

  .chat-header {
    padding: 10px;
    background-color: #f5f5f5;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
  }

  .chat-messages {
    flex: 1;
    padding: 10px;
    overflow-y: scroll;
  }

  .message {
    margin-bottom: 10px;
  }

  .message-author {
    font-weight: bold;
  }

  .chat-input {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    background-color: #f5f5f5;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
  }

  .chat-input input {
    flex: 1;
    padding: 5px;
    border-radius: 5px;
    border: none;
    outline: none;
  }

  .chat-input button {
    padding: 5px 10px;
    border-radius: 5px;
    border: none;
    background-color: #4caf50;
    color: #fff;
    cursor: pointer;
  }
</style>

这个组件包括一个聊天头部，消息列表和一个输入框。你可以使用数据和方法来管理消息列表和输入框的值，如上所示。在这个例子中，发送消息时会向消息列表中添加一条新消息。

当你完成了组件的编写，你可以在父组件中使用它，如下所示：

<template>
  <div class="app">
    <Chat />
  </div>
</template>

<script>
  import Chat from './components/Chat';

  export default {
    components: {
      Chat,
    },
  }
</script>

<style>
  .app {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: #f5f5f5;
  }
</style>

这个例子只是一个简单的聊天界面，你可以根据需要进行修改和扩展。