当前位置：首页 > VUE

vue 登录页面实现

2026-03-08 12:23:08VUE

实现 Vue 登录页面的步骤

创建 Vue 项目

使用 Vue CLI 创建一个新项目，确保已安装 Vue CLI。运行以下命令：

vue create login-page

选择默认配置或手动配置，根据需求添加 Router 和 Vuex。

设计登录表单

在 src/views 或 src/components 下创建 Login.vue 文件，包含用户名和密码输入框以及提交按钮。

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

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    handleSubmit() {
      // 处理登录逻辑
    }
  }
}
</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
</style>

添加表单验证

使用 Vuelidate 或手动验证表单输入，确保用户名和密码符合要求。

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

export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  validations: {
    username: { required, minLength: minLength(3) },
    password: { required, minLength: minLength(6) }
  },
  methods: {
    handleSubmit() {
      if (this.$v.$invalid) {
        alert('请填写正确的用户名和密码')
        return
      }
      // 提交逻辑
    }
  }
}
</script>

处理登录逻辑

在 handleSubmit 方法中调用 API 进行身份验证，使用 Axios 发送 POST 请求。

<script>
import axios from 'axios'

export default {
  methods: {
    async handleSubmit() {
      try {
        const response = await axios.post('/api/login', {
          username: this.username,
          password: this.password
        })
        localStorage.setItem('token', response.data.token)
        this.$router.push('/dashboard')
      } catch (error) {
        alert('登录失败，请检查用户名和密码')
      }
    }
  }
}
</script>

添加路由保护

在 src/router/index.js 中配置路由守卫，防止未登录用户访问受保护页面。

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/views/Login.vue'
import Dashboard from '@/views/Dashboard.vue'

Vue.use(Router)

const router = new Router({
  routes: [
    { path: '/login', component: Login },
    { path: '/dashboard', component: Dashboard, meta: { requiresAuth: true } }
  ]
})

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !localStorage.getItem('token')) {
    next('/login')
  } else {
    next()
  }
})

export default router

样式优化

使用 CSS 或 UI 库（如 Element UI 或 Vuetify）美化登录页面。

<template>
  <el-form class="login-form" @submit.native.prevent="handleSubmit">
    <el-form-item label="用户名">
      <el-input v-model="username" placeholder="请输入用户名"></el-input>
    </el-form-item>
    <el-form-item label="密码">
      <el-input v-model="password" type="password" placeholder="请输入密码"></el-input>
    </el-form-item>
    <el-button type="primary" native-type="submit">登录</el-button>
  </el-form>
</template>

响应式设计

确保登录页面在不同设备上显示正常，添加媒体查询或使用 Flexbox/Grid 布局。

vue 登录页面实现

.login-form {
  width: 300px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

@media (max-width: 600px) {
  .login-form {
    width: 90%;
  }
}

通过以上步骤，可以实现一个功能完善且美观的 Vue 登录页面。