elementplus 加vue3 setup语法糖编写一个登陆页

以下是使用 elementplus 和 Vue3 setup 语法糖编写的一个简单的登录页：

<template>
  <div class="login-container">
    <el-card>
      <h2>登录</h2>
      <el-form :model="form" ref="form">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="form.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="form.password" type="password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { reactive, ref } from 'vue'
import { ElButton, ElCard, ElForm, ElFormItem, ElInput } from 'element-plus'

export default {
  components: {
    ElButton,
    ElCard,
    ElForm,
    ElFormItem,
    ElInput,
  },
  setup() {
    const form = reactive({
      username: '',
      password: '',
    })

    const submitForm = () => {
      const valid = $refs.form.validate()
      if (valid) {
        console.log('Form submitted:', form)
      }
    }

    return {
      form,
      submitForm,
    }
  },
}
</script>

<style>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
</style>

在这个例子中，我们使用了 elementplus 的组件来构建登录表单，包括 `ElCard`、`ElForm`、`ElFormItem` 和 `ElInput`。我们还使用了 Vue3 的 `reactive` 和 `ref` 方法来创建响应式的数据和引用。

在 `setup` 函数中，我们创建了一个名为 `form` 的响应式对象，其中包含了用户名和密码。我们还创建了一个名为 `submitForm` 的函数，该函数在表单提交时被调用，打印表单数据到控制台。最后，我们将 `form` 和 `submitForm` 导出，以便在模板中使用。

我们使用 `v-model` 指令将输入框与 `form` 对象中的属性绑定，以确保输入框中的值始终与数据同步。我们还使用 `:model` 和 `ref` 属性将表单绑定到组件实例中，以便在 `submitForm` 函数中访问表单数据并进行验证。

最后，我们使用 CSS 样式将登录表单居中。