How to use the ant-design-vue.Form.Item function in ant-design-vue

function generateUUIDv4 () {
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
      var r = Math.random() * 16 | 0
      var v = c === 'x' ? r : (r & 0x3 | 0x8)
      return v.toString(16)
    })
  }

  export default {
    components: {
      codemirror,
      [Form.name]: Form,
      [Input.name]: Input,
      [Select.name]: Select,
      [Select.Option.name]: Select.Option,
      [Form.Item.name]: Form.Item
    },
    name: 'rule-edit',
    data () {
      return {
        ruleKey: { // 样例的id和name列表
          id: '',
          enable: false,
          name: ''
        },
        ruleName: '', // 样例规则的名称
        ruleValue: '', // 样例的代码字符串
        ruleOptions,
        mode: 'add',
        formItemLayout: {
          labelCol: { span: 4 },
          wrapperCol: { span: 16 }

loading: "frontend/openapi/loading",
      users: "frontend/openapi/getUsers"
    })
  },
  components: {
    APageHeaderWrapper: PageHeaderWrapper,
    AAvatar: Avatar,
    ARow: Row,
    ACol: Col,
    ACard: Card,
    ACardGrid: Card.Grid,
    ACardMeta: Card.Meta,
    AList: List,
    AButton: Button,
    AForm: Form,
    AFormItem: Form.Item,
    AIcon: Icon,
    ATable: Table,
    ADescriptionItem: DescriptionItem,
    ADivider: Divider,
    ADropdown: Dropdown,
    AInput: Input,
    ASelect: Select,
    AOption: Select.Option,
    ARangePicker: DatePicker.RangePicker,
  },
  methods: {
    toggleForm() {
      this.expandForm = !this.expandForm;
    },
    onSelectChange (selectedRowKeys) {
      console.log('selectedRowKeys changed: ', selectedRowKeys);

message
} from "ant-design-vue";
import SendCaptchaButton from "@/components/SendCaptchaButton";
import { mapGetters } from "vuex";
export default {
  name: "ai-login",
  data: () => ({
    activeKey: "2",
    active: [],
    submitting: false,
    autoLogin: false,
    start: false
  }),
  components: {
    AForm: Form,
    AFormItem: Form.Item,
    ATabs: Tabs,
    ATabPane: Tabs.TabPane,
    AButton: Button,
    ACheckbox: Checkbox,
    AInput: Input,
    AIcon: Icon,
    ARow: Row,
    ACol: Col,
    ASendCaptchaButton: SendCaptchaButton
  },
  methods: {
    onSwithAutoLogin(e) {
      this.autoLogin = e.target.checked;
    },
    onSwitchTab(key) {
      this.active = [];

import { Component, Vue } from 'vue-property-decorator';
import {
  Form, Input, Select, Radio, Card, Dropdown, Menu, Icon, DatePicker, Button, Modal,
} from 'ant-design-vue';

import './index.less';

@Component({
  name: 'baseForm',
  components: {
    'a-form': Form,
    'a-form-item': Form.Item,
    'a-input': Input,
    'a-select': Select,
    'a-radio': Radio,
    'a-radio-group': Radio.Group,
    'a-card': Card,
    'a-dropdown': Dropdown,
    'a-menu': Menu,
    'a-menu-item': Menu.Item,
    'a-icon': Icon,
    'a-date-picker': DatePicker,
    'a-button': Button,
    'a-modal': Modal,
  },
  props: {
    Form,
  },

import { Component, Emit, Vue } from 'vue-property-decorator';
import {
  Form, Button, Input, Icon,
} from 'ant-design-vue';
import config from '@/utils/config';

import './login.less';

@Component({
  components: {
    'a-form': Form,
    'a-form-item': Form.Item,
    'a-button': Button,
    'a-input': Input,
    'a-icon': Icon,
  },
  props: {
    Form,
  },
})
class Login extends Vue {
  loginForm: {
    username: string;
    password: string;
  } = { username: '', password: '' };

  config = config;