vant-ui 写一个我的页面

Vant UI 是一套基于 Vue.js 的轻量级组件库，它提供了一系列美观、易用的移动端界面组件。为了帮你快速上手创建一个简单的页面，我们可以使用 Vant UI 中的基础组件构建一个登录注册页面的示例。

首先，你需要安装 Vant UI 的依赖，如果你使用 Vue CLI，可以在 `main.js` 或者 `vite.config.js` 中引入：

// main.js (Vue CLI)
import { createApp } from 'vue'
import App from './App.vue'
import Vant from 'vant'

createApp(App).use(Vant).mount('#app')

// vite.config.js
import { createVitePlugin } from 'vite-plugin-vue2'
export default defineConfig({
  plugins: [createVitePlugin('vant')],
})

然后，在你的 `components/Login.vue` 文件中，可以编写登录组件代码：

<template>
  <van-field v-model="username" label="用户名" placeholder="请输入用户名"></van-field>
  <van-password-field v-model="password" label="密码" placeholder="请输入密码"></van-password-field>
  <van-button type="primary" @click="handleSubmit">登录</van-button>
</template>

<script setup>
import { ref } from 'vue'
const username = ref('');
const password = ref('');

function handleSubmit() {
  // 这里只是一个简单示例，实际应用中应该处理登录逻辑
  console.log('提交表单', { username: username.value, password: password.value });
}
</script>

类似地，你可以创建一个注册组件 `Register.vue`，替换上面的登录部分并添加相应的输入字段和按钮。

完整的例子结构可能如下：

- src/
  - components/
    - Login.vue
    - Register.vue
  - App.vue
  ...