使用vue生成登录页面

1. 首先，在vue项目中创建一个新的组件，命名为“Login.vue”。

2. 在Login.vue中，添加一个表单，用于输入用户名和密码。

<template>
  <div class="login">
    <form>
      <div class="form-group">
        <label for="username">用户名：</label>
        <input type="text" id="username" v-model="username">
      </div>
      <div class="form-group">
        <label for="password">密码：</label>
        <input type="password" id="password" v-model="password">
      </div>
      <button type="submit">登录</button>
    </form>
  </div>
</template>

3. 在Login.vue中，添加data属性，用于存储输入的用户名和密码。

<script>
export default {
  name: 'Login',
  data() {
    return {
      username: '',
      password: ''
    }
  }
}
</script>

4. 在Login.vue中，添加一个方法，用于处理表单提交事件，并将用户名和密码传递给后台进行验证。

<script>
export default {
  name: 'Login',
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    handleLogin() {
      // 调用后台接口进行验证
    }
  }
}
</script>

5. 在Login.vue中，将表单提交事件绑定到handleLogin方法上。

<form @submit.prevent="handleLogin">

6. 最后，在Login.vue中，添加样式来美化登录页面。

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

form {
  border: 1px solid #ccc;
  padding: 20px;
  border-radius: 5px;
}

.form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}

label {
  margin-bottom: 5px;
}

input[type="text"],
input[type="password"] {
  padding: 5px;
  border-radius: 3px;
  border: 1px solid #ccc;
  font-size: 16px;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 10px;
}

button[type="submit"] {
  background-color: #007bff;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 3px;
  font-size: 16px;
  cursor: pointer;
}
</style>