使用 Vue 开发登录页面的完整指南

一、项目搭建与基础配置

1. 环境准备
   使用 Vue CLI 或 Vite 创建项目，推荐组合：Vue3 + Element Plus + Vue Router

   npm create vue@latest
   npm install element-plus @element-plus/icons-vue vue-router

2. 全局配置（main.js）

   
   import { createApp } from 'vue'
   import ElementPlus from 'element-plus'
   import router from './router'
   import 'element-plus/dist/index.css'
   
   const app = createApp(App)
   app.use(ElementPlus)
   app.use(router)
   app.mount('#app')

二、登录页面核心实现

1. 模板结构（login.vue）

2. 数据与验证逻辑

3. 样式优化要点

三、进阶功能实现

1. 路由守卫配置

   // router/index.js
   router.beforeEach((to) => {
     const isAuthenticated = sessionStorage.getItem('token')
     
     if (to.meta.requiresAuth && !isAuthenticated) {
       return '/login'
     }
     
     if (to.path === '/login' && isAuthenticated) {
       return '/dashboard'
     }
   })

2. 安全增强方案

   • 密码加密传输（使用crypto-js）

   • 添加验证码功能

   • 请求限流与防重放攻击

   import CryptoJS from 'crypto-js'
   
   const encryptPassword = (password) => {
     return CryptoJS.SHA256(password).toString()
   }

3. 第三方登录集成

四、最佳实践与注意事项

1. 表单验证优化

   •   异步验证手机号是否注册

   •  密码强度实时检测

   const checkUsername = async (rule, value, callback) => {
     if (!value) return callback(new Error('请输入手机号'))
     if (!/^1[3-9]\d{9}$/.test(value)) return callback(new Error('格式错误'))
     
     try {
       const { data } = await api.checkUsername(value)
       if (!data.exist) callback(new Error('该用户未注册'))
     } catch (error) {
       callback(new Error('验证失败'))
     }
   }

2. 用户体验优化

   • 自动填充最近登录账号

   • 记住密码功能（加密存储）

   • 加载状态管理

   // 自动填充
   const lastUsername = localStorage.getItem('lastUsername')
   if (lastUsername) form.username = lastUsername
   
   // 记住密码
   const savePassword = ref(false)
   watch(savePassword, (val) => {
     if (val) {
       localStorage.setItem('remembered', JSON.stringify(form))
     } else {
       localStorage.removeItem('remembered')
     }
   })

3. 错误处理规范

   try {
     const res = await loginApi(formData)
     if (res.code === 1001) {
       ElMessage.warning('该账号已被冻结')
     }
   } catch (err) {
     ElMessage.error({
       message: `登录失败: ${err.message}`,
       grouping: true  // 相同错误合并显示
     })
   }

五、典型问题解决方案

1. 跨域问题处理

   // vite.config.js
   export default defineConfig({
     server: {
       proxy: {
         '/api': {
           target: 'http://backend.example.com',
           changeOrigin: true,
           rewrite: (path) => path.replace(/^\/api/, '')
         }
       }
     }
   })

2. 响应式布局适配

   @media (max-width: 768px) {
     .login-container {
       padding: 1rem;
       
       :deep(.el-form) {
         width: 100%;
         margin: 0 1rem;
       }
     }
   }

3. 浏览器兼容问题

   • 使用@vitejs/plugin-legacy处理ES6+语法

   • 添加autoprefixer自动补全CSS前缀