用vue写一个拥有登陆功能的登录界面

好的，下面是一个拥有登录功能的登录界面的 Vue 组件代码：

<template>
  <div class="login-container">
    <h1>Login</h1>
    <form>
      <div class="form-group">
        <label for="username">Username:</label>
        <input type="text" id="username" v-model="username">
      </div>
      <div class="form-group">
        <label for="password">Password:</label>
        <input type="password" id="password" v-model="password">
      </div>
      <button type="submit" @click.prevent="login">Login</button>
      <p v-if="errorMessage" class="error">{{ errorMessage }}</p>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      errorMessage: ''
    }
  },
  methods: {
    async login() {
      try {
        const response = await fetch('/api/login', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({
            username: this.username,
            password: this.password
          })
        })
        const result = await response.json()
        if (result.success) {
          // 登录成功，跳转到首页
          this.$router.push('/')
        } else {
          // 登录失败，显示错误信息
          this.errorMessage = result.message
        }
      } catch (error) {
        console.error(error)
        this.errorMessage = '网络错误，请稍后再试！'
      }
    }
  }
}
</script>

<style>
.login-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

h1 {
  margin-bottom: 30px;
}

form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.form-group {
  margin-bottom: 20px;
}

label {
  display: block;
  margin-bottom: 10px;
}

input[type="text"],
input[type="password"] {
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
  width: 300px;
  font-size: 16px;
}

button {
  padding: 10px 20px;
  border-radius: 5px;
  border: none;
  background-color: #007acc;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}

.error {
  color: red;
  margin-top: 10px;
}
</style>

这个登录界面与之前的不同之处在于，它发送了一个 POST 请求到 `/api/login` 接口来进行登录验证。如果登录成功，则会跳转到首页；如果登录失败，则会显示错误信息。需要注意的是，这个示例中的 `/api/login` 接口是一个假的接口，你需要根据自己的实际情况来修改接口地址和请求参数。同时，建议在实际应用中使用一些安全措施，如加密传输等，以保障用户信息安全。