当前位置：首页 > VUE

vue 3.0登录界面实现

2026-02-23 12:26:29VUE

Vue 3.0 登录界面实现步骤

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

组件结构
创建 Login.vue 文件，包含表单元素（用户名、密码输入框、提交按钮）。使用 v-model 双向绑定数据，例如：

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

状态管理
在 <script setup> 中使用 ref 或 reactive 管理表单数据：

<script setup>
import { reactive } from 'vue';
const form = reactive({
  username: '',
  password: ''
});
const handleSubmit = () => {
  console.log('提交数据:', form);
};
</script>

表单验证
引入 vee-validate 或手动验证。示例手动验证：

const validate = () => {
  if (!form.username.trim()) return '用户名不能为空';
  if (form.password.length < 6) return '密码至少6位';
  return null;
};
const handleSubmit = () => {
  const error = validate();
  if (error) alert(error);
  else alert('验证通过');
};

样式设计
使用 <style scoped> 添加局部样式，或引入 UI 库（如 Element Plus、Ant Design Vue）快速构建。Element Plus 示例：

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

路由与权限
安装 vue-router，配置登录后跳转：

// router/index.js
import { createRouter } from 'vue-router';
const routes = [
  { path: '/login', component: () => import('@/views/Login.vue') },
  { path: '/home', component: () => import('@/views/Home.vue'), meta: { requiresAuth: true } }
];
const router = createRouter({ routes });

API 请求
通过 axios 发送登录请求，保存 token 至本地存储：

import axios from 'axios';
const handleSubmit = async () => {
  try {
    const res = await axios.post('/api/login', form);
    localStorage.setItem('token', res.data.token);
    router.push('/home');
  } catch (error) {
    alert('登录失败: ' + error.response.data.message);
  }
};

响应式布局
使用 CSS Flex/Grid 或媒体查询适配不同屏幕。例如：

form {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
}
@media (max-width: 600px) {
  input { width: 100%; }
}

完整示例代码
整合上述内容后的 Login.vue：

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

<script setup>
import { reactive } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios';
const form = reactive({ username: '', password: '' });
const router = useRouter();
const handleSubmit = async () => {
  try {
    const res = await axios.post('/api/login', form);
    localStorage.setItem('token', res.data.token);
    router.push('/home');
  } catch (error) {
    alert('登录失败: ' + error.response.data.message);
  }
};
</script>

<style scoped>
.login-form {
  max-width: 400px;
  margin: 50px auto;
}
</style>

vue 3.0登录界面实现