写一个前端vue3登录代码

以下是一个简单的Vue 3登录代码示例：

<template>
  <div>
    <h1>Login</h1>
    <form @submit.prevent="login">
      <label for="username">Username:</label>
      <input type="text" id="username" v-model="username">
      <br>
      <label for="password">Password:</label>
      <input type="password" id="password" v-model="password">
      <br>
      <button type="submit">Login</button>
    </form>
  </div>
</template>

<script>
import { reactive } from 'vue';

export default {
  setup() {
    const state = reactive({
      username: '',
      password: '',
    });

    function login() {
      // TODO: 实现登录逻辑
    }

    return { state, login };
  },
};
</script>

在这个示例中，我们使用了Vue 3中的`reactive`函数来创建响应式状态对象`state`，包含了`username`和`password`两个输入框的值。

当用户提交表单时，我们调用了`login`函数来处理登录逻辑。在实际应用中，我们可以通过发送HTTP请求来验证用户输入的用户名和密码，并在登录成功后进行相应的跳转或处理。