帮我写一段vue的登陆界面，具体输入用户名和密码登陆

好的，以下是一个基本的 Vue 登录界面，包含了输入用户名和密码，点击“登录”按钮后会弹出提示框显示用户输入的用户名和密码。

HTML:

<template>
  <div class="login-form">
    <h2>登录</h2>
    <form @submit.prevent="login">
      <div class="form-group">
        <label for="username">用户名</label>
        <input type="text" id="username" v-model="username" required>
      </div>
      <div class="form-group">
        <label for="password">密码</label>
        <input type="password" id="password" v-model="password" required>
      </div>
      <button type="submit">登录</button>
    </form>
    <div v-if="loggedIn">
      <p>欢迎 {{ username }} 登录！</p>
    </div>
  </div>
</template>

JavaScript:

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      loggedIn: false
    }
  },
  methods: {
    login() {
      // 这里可以通过 Ajax 请求后端接口进行登录验证
      if (this.username && this.password) {
        this.loggedIn = true
        alert(`欢迎 ${this.username} 登录！`)
      } else {
        alert('请输入用户名和密码！')
      }
    }
  }
}
</script>

CSS:

<style scoped>
.login-form {
  width: 400px;
  margin: 0 auto;
  text-align: center;
}
.form-group {
  margin: 10px 0;
}
label {
  display: block;
  text-align: left;
}
input {
  width: 100%;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
}
button[type="submit"] {
  margin-top: 20px;
  padding: 10px 20px;
  border-radius: 5px;
  background-color: #007bff;
  color: #fff;
  border: none;
  cursor: pointer;
}
button[type="submit"]:hover {
  background-color: #0062cc;
}
</style>

这是一个非常基本的登录界面，你可以根据实际需求进行修改。需要注意的是，这里的登录验证只是前端验证，真正的登录验证应该在后端进行。