使用Marscode AI生成VUE界面。

1. 下载安装 VScode

2.打开VSCODE ，下载MarscodeAI插件。

输入要求，比如

新建一个VUE界面，功能是实现用户登录，有两种登录方式，一种是使用用户名和密码登录，第二种使用手机号和短信验证码登录。

直接生成代码：

<template>
  <div class="login-container">
    <el-tabs v-model="activeTab" type="border-card">
      <el-tab-pane label="用户名登录" name="user-login">
        <el-form :model="userLoginForm" :rules="userLoginRules" ref="userLoginForm" class="login-form">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="userLoginForm.username" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="userLoginForm.password" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="login('user-login')">登录</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="手机号登录" name="phone-login">
        <el-form :model="phoneLoginForm" :rules="phoneLoginRules" ref="phoneLoginForm" class="login-form">
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="phoneLoginForm.phone" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="验证码" prop="code">
            <el-input v-model="phoneLoginForm.code" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="login('phone-login')">登录</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'user-login',
      userLoginForm: {
        username: '',
        password: ''
      },
      userLoginRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      },
      phoneLoginForm: {
        phone: '',
        code: ''
      },
      phoneLoginRules: {
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    login(tab) {
      if (tab === 'user-login') {
        this.$refs.userLoginForm.validate((valid) => {
          if (valid) {
            // 用户名登录逻辑
            console.log('User login:', this.userLoginForm)
          } else {
            console.log('Please check your input')
            return false
          }
        })
      } else if (tab === 'phone-login') {
        this.$refs.phoneLoginForm.validate((valid) => {
          if (valid) {
            // 手机号登录逻辑
            console.log('Phone login:', this.phoneLoginForm)
          } else {
            console.log('Please check your input')
            return false
          }
        })
      }
    }
  }
}
</script>

<style scoped>
.login-container {
  max-width: 400px;
  margin: 0 auto;
}
.login-form {
  margin-top: 20px;
}
</style>

支行一下界面如下

界面还错，继续提意见改进。

登录 按钮 靠右放置， 在第一种用户和密码登录，加入图片验证码

新代码生成的界面如下
、