生成一个vue的登陆页面

下面是一个简单的 Vue 登录页面的代码示例：

<template>
  <div class="login-container">
    <h1>登录</h1>
    <form>
      <div class="form-group">
        <label>用户名</label>
        <input type="text" v-model="username" required>
      </div>
      <div class="form-group">
        <label>密码</label>
        <input type="password" v-model="password" required>
      </div>
      <div class="form-group">
        <button type="submit" @click.prevent="login">登录</button>
      </div>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    login() {
      // 在这里编写登录逻辑
    }
  }
}
</script>

<style>
.login-container {
  width: 400px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
}
.form-group {
  margin-bottom: 10px;
}
label {
  display: block;
  margin-bottom: 5px;
}
input[type="text"],
input[type="password"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: 16px;
  box-sizing: border-box;
}
button[type="submit"] {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 3px;
  font-size: 16px;
  cursor: pointer;
}
button[type="submit"]:hover {
  background-color: #3e8e41;
}
</style>

这是一个简单的登录页面，其中包含用户名和密码输入框以及登录按钮。在 `login` 方法中，你可以编写登录逻辑，例如将表单数据发送到后端验证，如果验证通过则跳转到主页。你可以根据具体的需求修改样式或添加其他功能。