使用vue写一个简单的适配移动端还有网页版的代码

这里提供一个简单的使用Vue实现适配移动端和网页版的代码：

<template>
  <div>
    <input type="text" v-model="content" />
    <button @click="send">发送</button>
    <div v-for="message in messages" :key="message.id">
      <p>{{ message.content }}</p>
      <p>{{ message.reply }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: "",
      messages: [],
    };
  },
  methods: {
    send() {
      // 发送用户输入的对话内容到后端
      fetch("/api/chat", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ content: this.content }),
      })
        .then((response) => response.json())
        .then((data) => {
          // 将获取到的回复添加到消息列表中
          this.messages.push({
            id: this.messages.length + 1,
            content: this.content,
            reply: data.reply,
          });
          // 清空输入框
          this.content = "";
        });
    },
  },
};
</script>

这个代码实现了一个简单的 ChatGPT 对话界面，可以通过输入框输入对话内容，点击按钮发送到后端进行处理，并将获取到的回复添加到消息列表中。在移动端和网页端，可以通过引入这个 Vue 组件来实现对话交互。通过使用 fetch 方法发送 POST 请求，调用后端实现的 ChatGPT 对话 API。同时，通过 Vue 组件可以轻松实现适配移动端和网页版等多种界面方式。