生成一个基于elmentui的首页代码

A：

<template>
  <div>
    <el-row>
      <el-col :span="24">
        <h1>欢迎使用Element UI</h1>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-card>
          <div slot="header" class="clearfix">
            <span>基本信息</span>
          </div>
          <el-form>
            <el-form-item label="用户名">
              <el-input v-model="form.username"></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input type="password" v-model="form.password"></el-input>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div slot="header" class="clearfix">
            <span>功能列表</span>
          </div>
          <el-menu default-active="1" class="el-menu-vertical-demo" @select="handleMenuSelect">
            <el-menu-item index="1">
              <i class="el-icon-message"></i>
              <span>页面1</span>
            </el-menu-item>
            <el-menu-item index="2">
              <i class="el-icon-picture"></i>
              <span>页面2</span>
            </el-menu-item>
            <el-menu-item index="3">
              <i class="el-icon-location-information"></i>
              <span>页面3</span>
            </el-menu-item>
          </el-menu>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: '',
      },
    };
  },
  methods: {
    handleMenuSelect(index) {
      switch (index) {
        case '1':
          // TODO: 跳转到页面1
          break;
        case '2':
          // TODO: 跳转到页面2
          break;
        case '3':
          // TODO: 跳转到页面3
          break;
        default:
          break;
      }
    },
  },
};
</script>

<style>
/* TODO: 样式设置 */
</style>