将文件中的饿了么ui组件替换成Ant Design of Vue组件

为了将文件中的 Element UI 组件替换成 Ant Design of Vue（以下简称 antd）组件，你需要按照以下步骤进行替换：

### 1. 替换 import 语句
在项目中安装 `ant-design-vue`：

npm install ant-design-vue

在文件顶部添加必要的导入语句，并移除 Element UI 的导入语句：

<template>
<!-- 以下是修改后的模板部分 -->
</template>

<script>
import { Form, Input, Button, Divider, Image } from 'ant-design-vue';

export default {
  components: {
    AForm: Form,
    AFormItem: Form.Item,
    AInput: Input,
    AButton: Button,
    ADivider: Divider,
    AImage: Image
  },
  data() {
    return {
      captchaImg: '',
      loginObject: {
        username: '',
        password: '',
        code: '',
        key: ''
      },
      rules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        code: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
          { min: 5, max: 5, message: '验证码的长度为5', trigger: 'blur' }
        ]
      }
    };
  },
  created() {
    this.getCaptcha();
  },
  methods: {
    getCaptcha() {
      let url = '/api/captcha';
      this.$axios.get(url).then(response => {
        this.captchaImg = response.data.resultdata.captcha;
        this.loginObject.key = response.data.resultdata.key;
      }).catch(e => {
        console.log(e);
      });
    },
    submitLoginForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$axios.post('/login', this.$qs.stringify(this.loginObject)).then(response => {
            const jwt = response.headers['token'];
            this.$store.commit('SET_TOKEN', jwt);
            this.$router.push("/index");
          }).catch(e => {
            console.log(e);
            this.getCaptcha();
          });
        } else {
          return false;
        }
      });
    }
  }
}
</script>

<style scoped>
.all {
  height: 52.5vw;
  display: flex;
  background-color: #FBAB7E;
  background-image: linear-gradient(315deg, #FBAB7E 0%, #f9dc8e 100%);
}

.ant-row {
  background: #fafafa;
  height: 44vw;
  width: 88%;
  margin-top: 3.5vw;
  margin-left: 6vw;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  box-shadow: 2px 5px 5px 5px rgba(0, 0, 0, .1);
}

.ant-divider {
  height: 200px;
}

.captchImg {
  float: left;
  margin-left: 10px;
  border-radius: 4px;
  border: 1px solid #eee;
}
</style>

### 2. 替换模板部分
将所有的 Element UI 组件替换成 antd 对应的组件：

<template>
  <div class="all">
    <a-row>
      <a-col :span="6">
        <h2>欢迎使用智慧社区商城后台管理系统</h2>
        <a-image style="width: 190px; height: 190px;" :src="require('@/assets/logo1.jpg')" />
        <p>万里学院大数据与软件工程学院提供技术支持</p>
        <p>基于Vue+springBoot技术实现</p>
      </a-col>
      <a-col :span="1">
        <a-divider direction="vertical" />
      </a-col>
      <a-col :span="6">
        <a-form ref="loginForm" :model="loginObject" :rules="rules" @submit="handleSubmit">
          <a-form-item label="用户名" prop="username">
            <a-input v-model="loginObject.username" placeholder="请输入用户名" />
          </a-form-item>
          <a-form-item label="密码" prop="password">
            <a-input type="password" v-model="loginObject.password" placeholder="请输入密码" />
          </a-form-item>
          <a-form-item label="验证码" prop="code">
            <a-input v-model="loginObject.code" style="width: 140px; float: left;" maxLength="5" />
            <img :src="captchaImg" class="captchImg" />
          </a-form-item>
          <a-form-item>
            <a-button type="primary" html-type="submit">提交</a-button>
            <a-button>忘记密码</a-button>
          </a-form-item>
        </a-form>
      </a-col>
    </a-row>
  </div>
</template>

### 3. 调整样式
由于 antd 和 Element UI 的样式可能会有一些差异，需要适当调整 CSS 样式以适应新的组件。以上已经基本包含了主要的变化。

### 4. 测试
完成上述更改后，运行项目并测试登录功能，确保所有表单字段和按钮正常工作。

通过以上步骤，你可以将原本的 Element UI 组件顺利替换成 Ant Design of Vue 组件。