当前位置：首页 > VUE

vue 3.0登录界面实现

2026-01-22 21:43:04VUE

实现Vue 3.0登录界面

环境准备
确保已安装Node.js（建议版本14+）和Vue CLI（全局安装命令：npm install -g @vue/cli）。通过Vue CLI创建新项目：

vue create vue-login-demo

选择Vue 3模板，完成项目初始化。

组件结构与模板
在src/components下创建LoginForm.vue文件，包含表单模板：

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

逻辑与响应式数据
使用Vue 3的ref或reactive定义表单数据和方法：

<script>
import { reactive } from 'vue';
import { useRouter } from 'vue-router';

export default {
  setup() {
    const router = useRouter();
    const form = reactive({
      username: '',
      password: ''
    });

    const handleSubmit = () => {
      // 模拟登录验证
      if (form.username === 'admin' && form.password === '123456') {
        alert('登录成功');
        router.push('/dashboard');
      } else {
        alert('用户名或密码错误');
      }
    };

    return { form, handleSubmit };
  }
};
</script>

样式设计
添加CSS样式增强视觉效果：

<style scoped>
.login-container {
  max-width: 400px;
  margin: 50px auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

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

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.submit-btn {
  width: 100%;
  padding: 10px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.submit-btn:hover {
  background-color: #369f6b;
}
</style>

路由配置
在src/router/index.js中配置登录页路由（需先安装vue-router@4）：

import { createRouter, createWebHistory } from 'vue-router';
import LoginForm from '../components/LoginForm.vue';

const routes = [
  {
    path: '/login',
    name: 'Login',
    component: LoginForm
  },
  // 其他路由...
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

表单验证增强
使用vuelidate或自定义验证逻辑提升安全性：

// 示例：自定义验证
const validateForm = () => {
  const errors = [];
  if (!form.username.trim()) errors.push('用户名不能为空');
  if (form.password.length < 6) errors.push('密码长度至少6位');
  return errors;
};

const handleSubmit = () => {
  const errors = validateForm();
  if (errors.length > 0) {
    alert(errors.join('\n'));
    return;
  }
  // 提交逻辑...
};

API集成
实际项目中替换模拟验证为后端API调用：

import axios from 'axios';

const handleSubmit = async () => {
  try {
    const response = await axios.post('/api/login', form);
    if (response.data.success) {
      localStorage.setItem('token', response.data.token);
      router.push('/dashboard');
    }
  } catch (error) {
    alert(error.response?.data?.message || '登录失败');
  }
};

vue 3.0登录界面实现