使用 vue3 编写一个登录注册前端页面

好的，以下是一个简单的登录注册前端页面的实现：

首先，我们需要在 HTML 中添加两个表单：一个是登录表单，另一个是注册表单。每个表单都包含用户名和密码输入框以及相应的提交按钮。

<div id="app">
  <div v-if="!loggedIn">
    <h2>登录</h2>
    <form @submit.prevent="login">
      <label>
        用户名:
        <input type="text" v-model="loginData.username">
      </label>
      <label>
        密码:
        <input type="password" v-model="loginData.password">
      </label>
      <button type="submit">登录</button>
    </form>
    <hr>
    <h2>注册</h2>
    <form @submit.prevent="register">
      <label>
        用户名:
        <input type="text" v-model="registerData.username">
      </label>
      <label>
        密码:
        <input type="password" v-model="registerData.password">
      </label>
      <label>
        确认密码:
        <input type="password" v-model="registerData.confirmPassword">
      </label>
      <button type="submit">注册</button>
    </form>
  </div>
  <div v-else>
    <h2>欢迎，{{ username }}！</h2>
    <button @click="logout">退出</button>
  </div>
</div>

接下来，我们需要使用 Vue3 来编写 JavaScript 部分。我们需要定义一个 Vue 实例，并在其中添加以下属性和方法：

const app = Vue.createApp({
  data() {
    return {
      loggedIn: false,
      username: '',
      loginData: {
        username: '',
        password: ''
      },
      registerData: {
        username: '',
        password: '',
        confirmPassword: ''
      }
    }
  },
  methods: {
    async login() {
      // 发送登录请求
      const response = await fetch('/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(this.loginData)
      })
      const data = await response.json()
      if (data.success) {
        this.loggedIn = true
        this.username = data.username
      } else {
        alert(data.message)
      }
    },
    async register() {
      // 发送注册请求
      const response = await fetch('/register', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(this.registerData)
      })
      const data = await response.json()
      if (data.success) {
        this.loggedIn = true
        this.username = data.username
      } else {
        alert(data.message)
      }
    },
    async logout() {
      // 发送退出请求
      const response = await fetch('/logout')
      const data = await response.json()
      if (data.success) {
        this.loggedIn = false
        this.username = ''
      } else {
        alert(data.message)
      }
    }
  }
})

这里我们使用了 async/await 来发起登录、注册和退出请求，并在请求返回后更新界面。对于登录和注册请求，我们需要将用户名和密码作为 JSON 数据发送到服务器，服务器返回一个表示是否成功的 JSON 对象，其中 success 表示是否成功，message 表示错误信息（如果有的话），username 表示登录或注册成功后的用户名。

最后，我们需要将 Vue 实例挂载到页面上：

app.mount('#app')

我们需要在服务器端实现登录、注册和退出功能，以及处理相应的请求。

这里提供的代码只是一个简单的示例，实际实现需要根据具体的需求进行修改和完善。