element-plus写登陆界面

要使用 Element Plus 创建一个登录界面，可以使用以下步骤：

1. 导入 Element Plus 组件库：

import { ElForm, ElFormItem, ElInput, ElButton } from 'element-plus';

2. 在模板中使用组件：

<template>
  <el-form ref="form" :model="form" label-width="80px">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input v-model="form.password" type="password"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">登录</el-button>
    </el-form-item>
  </el-form>
</template>

3. 在脚本中添加表单验证和提交方法：

import { ref } from 'vue';
import { ElMessage } from 'element-plus';

export default {
  setup() {
    const form = ref({
      username: '',
      password: ''
    });

    const submitForm = () => {
      this.$refs.form.validate(valid => {
        if (valid) {
          // 表单验证通过，执行登录操作
          console.log('登录成功！');
        } else {
          // 表单验证失败，提示错误信息
          ElMessage.error('请输入用户名和密码！');
        }
      });
    };

    return {
      form,
      submitForm
    };
  }
};

这样就可以创建一个简单的登录界面了。需要注意的是，以上代码只是一个示例，具体实现需要根据实际需求进行修改。