帮我做一个简单的vue登陆界面

好的，以下是一个简单的Vue登录界面的代码示例：

<template>
  <div class="login-container">
    <h2>用户登录</h2>
    <form>
      <div class="form-group">
        <label for="username">用户名：</label>
        <input type="text" id="username" v-model="username" placeholder="请输入用户名">
      </div>
      <div class="form-group">
        <label for="password">密码：</label>
        <input type="password" id="password" v-model="password" placeholder="请输入密码">
      </div>
      <div class="form-group">
        <button type="button" @click="login">登录</button>
      </div>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    login() {
      // 在这里编写登录逻辑
      console.log(`用户名：${this.username}，密码：${this.password}`);
    }
  }
}
</script>

<style scoped>
.login-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
form {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 5px;
}
.form-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 10px 0;
}
label {
  font-size: 16px;
  margin-right: 10px;
}
input {
  padding: 5px;
  border-radius: 5px;
  border: none;
  outline: none;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  font-size: 16px;
}
button {
  padding: 10px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
}
</style>

这个代码示例中，我们使用了Vue的单文件组件形式，包含了模板、脚本和样式。其中，模板中定义了登录界面的HTML结构，脚本中定义了数据和方法，样式中定义了界面的样式。

在这个示例中，我们使用了Vue的数据绑定功能，将表单中的用户名和密码与组件中的数据进行绑定。当用户输入用户名和密码后，我们在登录按钮的点击事件中，可以获取到输入框中的数据，然后进行登录逻辑的处理。

当然，这个示例只是一个简单的登录界面，实际开发中，你需要根据具体需求进行功能的扩展和优化。