用vue写一个前端登陆界面

以下是一个简单的前端登录界面，使用Vue框架：

<template>
  <div class="login">
    <h1>Login</h1>
    <form>
      <input type="text" placeholder="Username" v-model="username">
      <input type="password" placeholder="Password" v-model="password">
      <button type="submit" @click.prevent="handleLogin">Login</button>
    </form>
    <p v-if="error" class="error">{{ error }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      error: ''
    }
  },
  methods: {
    handleLogin() {
      if (this.username === 'admin' && this.password === 'password') {
        // 登录成功
        this.$router.push('/dashboard')
      } else {
        // 登录失败
        this.error = 'Invalid username or password'
      }
    }
  }
}
</script>

<style>
.login {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

h1 {
  font-size: 2rem;
  margin-bottom: 2rem;
}

form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

input[type="text"],
input[type="password"] {
  padding: 0.5rem;
  border-radius: 0.25rem;
  border: 1px solid gray;
}

button[type="submit"] {
  padding: 0.5rem;
  border-radius: 0.25rem;
  border: none;
  background-color: blue;
  color: white;
  cursor: pointer;
}

.error {
  color: red;
}
</style>

在上面的代码中，我们定义了一个组件，包含一个登录表单。表单中有用户名和密码的输入框，以及一个提交按钮。在点击提交按钮时，我们调用handleLogin方法。如果用户名和密码正确，我们使用Vue Router将用户重定向到仪表板页面。如果用户名或密码不正确，我们设置一个错误消息，告诉用户登陆失败。