当前位置：首页 > VUE

vue实现简单登陆

2026-02-24 21:27:17VUE

创建Vue项目

使用Vue CLI快速初始化项目：

npm install -g @vue/cli
vue create vue-login-demo
cd vue-login-demo
npm run serve

设计登录表单

在 src/components/Login.vue 中编写表单：

vue实现简单登陆

<template>
  <div class="login">
    <h3>用户登录</h3>
    <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>
    <p v-if="error" class="error">{{ error }}</p>
  </div>
</template>

实现数据绑定与逻辑

在同一个文件中添加脚本部分：

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      error: ''
    }
  },
  methods: {
    handleSubmit() {
      if (this.username === 'admin' && this.password === '123456') {
        alert('登录成功');
        this.$router.push('/dashboard'); // 假设有路由配置
      } else {
        this.error = '用户名或密码错误';
      }
    }
  }
}
</script>

添加样式

在 <style> 标签中补充基础样式：

vue实现简单登陆

.login {
  max-width: 300px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 4px;
}
input {
  display: block;
  width: 100%;
  margin: 10px 0;
  padding: 8px;
}
button {
  width: 100%;
  padding: 8px;
  background: #42b983;
  color: white;
  border: none;
}
.error {
  color: red;
}

配置路由（可选）

若需跳转，在 src/router/index.js 中配置：

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

Vue.use(Router)

export default new Router({
  routes: [
    { path: '/', component: Login },
    { path: '/dashboard', component: Dashboard }
  ]
})