用vue3和vant4实现一个登录页

好的，以下是一个用Vue3和Vant4实现的登录页的示例代码：

<template>
  <van-form class="login-form" @submit="onSubmit">
    <van-field v-model="username" label="用户名" placeholder="请输入用户名" required></van-field>
    <van-field v-model="password" label="密码" type="password" placeholder="请输入密码" required></van-field>
    <van-button type="primary" block round native-type="submit">登录</van-button>
  </van-form>
</template>

<script>
import { defineComponent } from 'vue';
import { Form, Field, Button } from 'vant';

export default defineComponent({
  components: {
    VanForm: Form,
    VanField: Field,
    VanButton: Button,
  },
  setup() {
    const username = ref('');
    const password = ref('');

    const onSubmit = () => {
      // 处理登录逻辑
      console.log('登录');
    };

    return {
      username,
      password,
      onSubmit,
    };
  },
});
</script>

在该示例中，我们使用了Vant4的`Form`、`Field`和`Button`组件来构建登录页。其中，`Form`组件包含了两个`Field`组件，分别用于输入用户名和密码。`Button`组件则用于提交登录表单。

在`setup`函数中，我们使用了Vue3的`ref`函数来定义了`username`和`password`两个变量，并将它们的初始值设置为空字符串。同时，我们还定义了一个`onSubmit`函数，用于处理登录逻辑。

最后，我们通过`return`语句将变量和函数暴露给模板，以便在模板中使用。