vue实现登录页面模板

Vue 登录页面模板实现

基础结构

使用 Vue CLI 或 Vite 创建项目后，在 src/views 或 src/pages 目录下创建 Login.vue 文件。基础模板包含表单元素、数据绑定和样式：

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

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    handleSubmit() {
      console.log('提交数据:', this.form)
      // 这里添加登录逻辑
    }
  }
}
</script>

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

表单验证

添加 VeeValidate 或 Element UI 的表单验证功能：

<script>
import { required, minLength } from 'vuelidate/lib/validators'

export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      }
    }
  },
  validations: {
    form: {
      username: { required },
      password: { required, minLength: minLength(6) }
    }
  },
  methods: {
    handleSubmit() {
      this.$v.$touch()
      if (!this.$v.$invalid) {
        // 验证通过后的逻辑
      }
    }
  }
}
</script>

路由配置

在 router/index.js 中配置登录路由：

const routes = [
  {
    path: '/login',
    name: 'Login',
    component: () => import('../views/Login.vue')
  }
]

状态管理

使用 Vuex 存储登录状态：

// store/modules/auth.js
export default {
  state: {
    isAuthenticated: false,
    user: null
  },
  mutations: {
    setAuth(state, payload) {
      state.isAuthenticated = payload.isAuthenticated
      state.user = payload.user
    }
  },
  actions: {
    login({ commit }, credentials) {
      return api.login(credentials).then(response => {
        commit('setAuth', {
          isAuthenticated: true,
          user: response.data.user
        })
      })
    }
  }
}

完整功能集成

结合 API 请求和路由跳转的完整示例：

<script>
import { mapActions } from 'vuex'

export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      },
      loading: false,
      error: null
    }
  },
  methods: {
    ...mapActions(['login']),
    async handleSubmit() {
      this.loading = true
      this.error = null
      try {
        await this.login(this.form)
        this.$router.push('/dashboard')
      } catch (error) {
        this.error = error.message || '登录失败'
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

响应式设计

添加媒体查询适应不同屏幕：

@media (max-width: 768px) {
  .login-container {
    width: 90%;
    padding: 15px;
  }
}

第三方登录

集成 Google 或 GitHub 登录按钮：

<template>
  <div class="social-login">
    <button @click="loginWithGoogle">Google登录</button>
    <button @click="loginWithGithub">GitHub登录</button>
  </div>
</template>

<script>
export default {
  methods: {
    loginWithGoogle() {
      // 调用Firebase或其他OAuth服务
    },
    loginWithGithub() {
      // GitHub OAuth实现
    }
  }
}
</script>