vue实现登录页面

创建登录页面结构

使用 Vue 单文件组件（.vue）构建登录页面的基础结构，包含表单、输入框和按钮：

<template>
  <div class="login-container">
    <h1>用户登录</h1>
    <form @submit.prevent="handleSubmit">
      <div class="form-group">
        <label for="username">用户名</label>
        <input 
          type="text" 
          id="username" 
          v-model="form.username" 
          placeholder="请输入用户名"
        />
      </div>
      <div class="form-group">
        <label for="password">密码</label>
        <input 
          type="password" 
          id="password" 
          v-model="form.password" 
          placeholder="请输入密码"
        />
      </div>
      <button type="submit">登录</button>
    </form>
  </div>
</template>

定义数据与事件处理

在 <script> 部分初始化表单数据并实现提交逻辑：

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    handleSubmit() {
      // 验证输入
      if (!this.form.username || !this.form.password) {
        alert('请输入用户名和密码');
        return;
      }

      // 模拟登录请求
      console.log('提交数据:', this.form);
      // 实际项目中替换为 axios 请求
      // this.$http.post('/api/login', this.form).then(...)
    }
  }
}
</script>

添加基础样式

在 <style> 中定义页面样式（支持 SCSS 或 CSS）：

<style scoped>
.login-container {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 4px;
}
.form-group {
  margin-bottom: 15px;
}
label {
  display: block;
  margin-bottom: 5px;
}
input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
button {
  width: 100%;
  padding: 10px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>

集成路由跳转

若项目使用 Vue Router，登录成功后跳转到主页：

methods: {
  handleSubmit() {
    // 模拟登录成功
    this.$router.push('/dashboard'); 
  }
}

表单验证增强

使用 VeeValidate 或 Element UI 等库实现高级验证：

<template>
  <input 
    v-model="form.username"
    v-validate="'required|min:3'"
    name="username"
  />
  <span v-if="errors.has('username')">{{ errors.first('username') }}</span>
</template>

<script>
import { Validator } from 'vee-validate';
export default {
  // 注册验证规则
  created() {
    Validator.extend('username', {
      validate: value => /^[a-zA-Z0-9_]+$/.test(value),
      message: '用户名只能包含字母、数字和下划线'
    });
  }
}
</script>

响应式布局优化

通过媒体查询适配移动端：

@media (max-width: 600px) {
  .login-container {
    width: 90%;
    margin-top: 20px;
  }
}