用vue编写一个登录页面

以下是一个简单的用Vue编写的登录页面的示例：

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

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    login() {
      // 这里可以编写登录的逻辑，比如向服务器发送请求进行验证
      // 如果登录成功，可以跳转到其他页面，比如首页
      console.log(`用户名：${this.username}，密码：${this.password}`);
    }
  }
}
</script>

<style>
.login-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 50px;
}

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

label {
  margin: 10px;
}

input {
  padding: 5px;
  border-radius: 5px;
  border: 1px solid gray;
  font-size: 16px;
}

button {
  margin-top: 20px;
  padding: 10px;
  background-color: blue;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
}
</style>

在上面的示例中，我们定义了一个`<template>`元素，其中包含登录页面的HTML代码，包括一个标题，一个表单，和两个输入框和一个提交按钮。通过`v-model`指令，我们将输入框的值与`data`属性中的`username`和`password`绑定起来，这样当用户输入值时，`data`中的属性也会相应地更新。

在`<script>`元素中，我们定义了一个Vue组件，并导出它。在`data`中，我们定义了`username`和`password`属性，并将它们的初始值设为空字符串。在`methods`中，我们定义了一个`login`方法，该方法会在用户提交表单时被调用。在本例中，我们只是简单地打印了用户输入的用户名和密码，但是你可以将该方法替换为实际的登录逻辑。

最后，在`<style>`元素中，我们定义了一些CSS样式，包括页面布局、表单样式、输入框样式和提交按钮样式。