当前位置：首页 > VUE

vue登录界面实现

2026-03-09 11:13:16VUE

Vue 登录界面实现步骤

环境准备 确保已安装 Node.js 和 Vue CLI。通过以下命令创建 Vue 项目：

vue create login-demo

安装依赖 根据需要安装 UI 库（如 Element UI）和路由管理：

npm install element-ui vue-router axios

项目结构

src/
├── components/
│   └── Login.vue
├── router/
│   └── index.js
├── App.vue
└── main.js

登录组件实现

Login.vue 模板部分

<template>
  <div class="login-container">
    <el-form :model="loginForm" :rules="rules" ref="loginForm">
      <el-form-item prop="username">
        <el-input v-model="loginForm.username" placeholder="用户名"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input v-model="loginForm.password" type="password" placeholder="密码"></el-input>
      </el-form-item>
      <el-button type="primary" @click="submitForm">登录</el-button>
    </el-form>
  </div>
</template>

Login.vue 脚本部分

vue登录界面实现

<script>
export default {
  data() {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submitForm() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          // 调用API接口
          axios.post('/api/login', this.loginForm)
            .then(response => {
              localStorage.setItem('token', response.data.token)
              this.$router.push('/dashboard')
            })
            .catch(error => {
              console.error(error)
            })
        }
      })
    }
  }
}
</script>

路由配置

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/components/Login'

Vue.use(Router)

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

样式优化

Login.vue 样式部分

<style scoped>
.login-container {
  width: 300px;
  margin: 100px auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 4px;
}
</style>

全局配置

main.js

vue登录界面实现

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

表单验证增强

可扩展验证规则：

rules: {
  password: [
    { min: 6, max: 20, message: '长度在6到20个字符', trigger: 'blur' }
  ]
}

API请求封装

建议创建单独的api.js文件：

import axios from 'axios'

export const login = data => {
  return axios.post('/api/login', data)
}

响应拦截处理

在main.js中添加：

axios.interceptors.response.use(
  response => response,
  error => {
    if (error.response.status === 401) {
      router.push('/login')
    }
    return Promise.reject(error)
  }
)