用vue写一个功能齐全的登录页面并展示效果

好的，以下是一个使用Vue.js编写的登录页面。该页面包含输入表单验证、错误提示、记住密码、登录功能等。

效果展示：


代码如下：

<template>
  <div class="login-form">
    <h2>登录</h2>
    <form class="form" @submit.prevent="login">
      <div class="form-group">
        <label for="username">用户名</label>
        <input type="text" class="form-control" id="username" v-model.trim="username" :class="{ 'is-invalid': submitted && !username }" placeholder="请输入用户名" autocomplete="off">
        <div class="invalid-feedback" v-if="submitted && !username">请输入用户名</div>
      </div>

      <div class="form-group">
        <label for="password">密码</label>
        <input type="password" class="form-control" id="password" v-model.trim="password" :class="{ 'is-invalid': submitted && !password }" placeholder="请输入密码" autocomplete="off">
        <div class="invalid-feedback" v-if="submitted && !password">请输入密码</div>
      </div>

      <div class="form-group form-check">
        <input type="checkbox" class="form-check-input" id="rememberMe" v-model="rememberMe">
        <label class="form-check-label" for="rememberMe">记住密码</label>
      </div>

      <button type="submit" class="btn btn-primary">登录</button>

      <div v-if="error" class="alert alert-danger mt-3">{{ error }}</div>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      rememberMe: false,
      submitted: false,
      error: ''
    };
  },
  methods: {
    login() {
      this.submitted = true;

      if (!this.username || !this.password) {
        return;
      }

      // TODO: 发送登录请求

      if (this.username === 'admin' && this.password === '123456') {
        // 登录成功，跳转到首页
        this.$router.push('/');
      } else {
        this.error = '用户名或密码错误';
      }
    }
  }
};
</script>

<style>
.login-form {
  max-width: 400px;
  margin: 0 auto;
  padding-top: 50px;
}

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

.form-group label {
  display: block;
  margin-bottom: 5px;
}

.form-control {
  display: block;
  width: 100%;
  height: calc(1.5em + 0.75rem + 2px);
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control:focus {
  color: #495057;
  background-color: #fff;
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.is-invalid {
  border-color: #dc3545;
}

.invalid-feedback {
  display: block;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 80%;
  color: #dc3545;
}

.form-check-input {
  position: relative;
  margin-top: 0.3rem;
  margin-right: 0.25rem;
  margin-left: -1.5rem;
}

.btn-primary {
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  user-select: none;
  background-color: #007bff;
  border: 1px solid #007bff;
  border-radius: 0.25rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn-primary:hover {
  color: #fff;
  background-color: #0069d9;
  border-color: #0062cc;
}

.alert {
  margin-top: 20px;
  padding: 0.75rem 1.25rem;
  border: 1px solid transparent;
  border-radius: 0.25rem;
}
.alert-danger {
  color: #721c24;
  background-color: #f8d7da;
  border-color: #f5c6cb;
}
</style>