登录页面用vue实现

创建Vue项目

使用Vue CLI初始化项目：

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

安装依赖

安装路由和表单验证库（如VeeValidate）：

npm install vue-router vee-validate

配置路由

在src/router/index.js中设置登录路由：

import { createRouter, createWebHistory } from 'vue-router'
import Login from '../views/Login.vue'

const routes = [
  { path: '/login', component: Login }
]

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

export default router

设计登录组件

创建src/views/Login.vue，包含表单和基础验证逻辑：

<template>
  <div class="login-container">
    <form @submit.prevent="handleSubmit">
      <input v-model="email" type="email" placeholder="Email" required />
      <input v-model="password" type="password" placeholder="Password" required />
      <button type="submit">Login</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      email: '',
      password: ''
    }
  },
  methods: {
    handleSubmit() {
      // 提交逻辑或API调用
      console.log(this.email, this.password)
    }
  }
}
</script>

<style scoped>
.login-container {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
}
</style>

添加表单验证

集成VeeValidate进行高级验证（示例）：

import { useField, useForm } from 'vee-validate'

export default {
  setup() {
    const { handleSubmit } = useForm()
    const { value: email } = useField('email', validateEmail)
    const { value: password } = useField('password', validatePassword)

    function validateEmail(value) {
      if (!value) return 'Required'
      const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
      return regex.test(value) ? true : 'Invalid email'
    }

    const onSubmit = handleSubmit(values => {
      console.log(values)
    })

    return { email, password, onSubmit }
  }
}

集成API调用

使用Axios发送登录请求：

npm install axios

在组件中添加：

import axios from 'axios'

methods: {
  async handleSubmit() {
    try {
      const response = await axios.post('/api/login', {
        email: this.email,
        password: this.password
      })
      localStorage.setItem('token', response.data.token)
      this.$router.push('/dashboard')
    } catch (error) {
      alert('Login failed')
    }
  }
}

响应式布局优化

在CSS中使用媒体查询适配移动端：

@media (max-width: 600px) {
  .login-container {
    padding: 10px;
  }
  input, button {
    width: 100%;
  }
}