用vue中的iview插件写一个登录页面

好的，下面是一个简单的示例代码：

<template>
  <div class="login-container">
    <Form :model="form" :rules="rules" ref="form">
      <FormItem label="用户名" prop="username">
        <Input v-model="form.username" placeholder="请输入用户名"></Input>
      </FormItem>
      <FormItem label="密码" prop="password">
        <Input type="password" v-model="form.password" placeholder="请输入密码"></Input>
      </FormItem>
      <FormItem>
        <Button type="primary" @click="submitForm">登录</Button>
      </FormItem>
    </Form>
  </div>
</template>

<script>
import { Form, FormItem, Input, Button } from "iview";

export default {
  components: {
    Form,
    FormItem,
    Input,
    Button,
  },
  data() {
    return {
      form: {
        username: "",
        password: "",
      },
      rules: {
        username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  methods: {
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 在这里提交登录表单
          // 例如 this.$http.post('/api/login', this.form)
          console.log("登录成功");
        } else {
          console.log("登录失败");
          return false;
        }
      });
    },
  },
};
</script>

<style>
.login-container {
  width: 400px;
  margin: 50px auto;
}
</style>

这个示例中使用了 iview 的 Form、FormItem、Input、Button 组件。在 data 中定义了一个 form 对象，包含用户名和密码两个字段。同时还定义了 rules 对象，用于验证表单输入的合法性。在 methods 中定义了 submitForm 方法用于提交表单，在其中使用了 iview 的 validate 方法验证表单的合法性。如果表单验证通过，则可以在 submitForm 方法中调用接口提交表单。