一、项目搭建与基础配置

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

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

复制代码

• 全局配置（main.js）
  

1. 
   
2. import { createApp } from 'vue'
   
3. import ElementPlus from 'element-plus'
   
4. import router from './router'
   
5. import 'element-plus/dist/index.css'
   
6. 
   
7. const app = createApp(App)
   
8. app.use(ElementPlus)
   
9. app.use(router)
   
10. app.mount('#app')

复制代码

二、登录页面核心实现

• 模板结构（login.vue）
  

1. <template>
   
2.   <div class="login-container">
   
3.     <el-form ref="formRef" :model="form" :rules="rules">
   
4.       <h2 class="title">校园交易平台</h2>
   
5.       
   
6.       <el-form-item prop="username">
   
7.         <el-input
   
8.           v-model="form.username"
   
9.           prefix-icon="User"
   
10.           placeholder="请输入手机号"
    
11.         />
    
12.       </el-form-item>
    
13. 
    
14.       <el-form-item prop="password">
    
15.         <el-input
    
16.           v-model="form.password"
    
17.           prefix-icon="Lock"
    
18.           type="password"
    
19.           show-password
    
20.           placeholder="请输入密码"
    
21.           @keyup.enter="handleLogin"
    
22.         />
    
23.       </el-form-item>
    
24. 
    
25.       <el-button
    
26.         type="primary"
    
27.         :loading="loading"
    
28.         @click="handleLogin"
    
29.       >
    
30.         登录
    
31.       </el-button>
    
32. 
    
33.       <div class="links">
    
34.         <router-link to="/register">立即注册</router-link>
    
35.         <router-link to="/forgot">忘记密码?</router-link>
    
36.       </div>
    
37.     </el-form>
    
38.   </div>
    
39. </template>

复制代码

• 数据与验证逻辑
  

1. <script setup>
   
2. import { ref, reactive } from 'vue'
   
3. import { useRouter } from 'vue-router'
   
4. import { ElMessage } from 'element-plus'
   
5. 
   
6. const form = reactive({
   
7.   username: '',
   
8.   password: ''
   
9. })
   
10. 
    
11. const rules = reactive({
    
12.   username: [
    
13.     { required: true, message: '请输入手机号', trigger: 'blur' },
    
14.     { pattern: /^1[3-9]\d{9}$/, message: '手机号格式错误' }
    
15.   ],
    
16.   password: [
    
17.     { required: true, message: '请输入密码', trigger: 'blur' },
    
18.     { min: 6, max: 16, message: '长度6-16位' }
    
19.   ]
    
20. })
    
21. 
    
22. const loading = ref(false)
    
23. const formRef = ref(null)
    
24. const router = useRouter()
    
25. 
    
26. const handleLogin = async () => {
    
27.   try {
    
28.     await formRef.value.validate()
    
29.     loading.value = true
    
30.    
    
31.     // 模拟API请求
    
32.     await new Promise(resolve => setTimeout(resolve, 1000))
    
33.    
    
34.     sessionStorage.setItem('token', 'demo_token')
    
35.     ElMessage.success('登录成功')
    
36.     router.replace('/dashboard')
    
37.   } catch (error) {
    
38.     console.error('登录失败:', error)
    
39.   } finally {
    
40.     loading.value = false
    
41.   }
    
42. }
    
43. </script>

复制代码

• 样式优化要点
  

1. 
   
2. <style scoped>
   
3. .login-container {
   
4.   height: 100vh;
   
5.   display: grid;
   
6.   place-items: center;
   
7.   background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
   
8. }
   
9. 
   
10. .title {
    
11.   text-align: center;
    
12.   margin-bottom: 2rem;
    
13.   color: #2c3e50;
    
14.   font-size: 1.8rem;
    
15. }
    
16. 
    
17. :deep(.el-form) {
    
18.   width: 400px;
    
19.   padding: 2rem;
    
20.   background: rgba(255,255,255,0.95);
    
21.   border-radius: 12px;
    
22.   box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    
23. }
    
24. 
    
25. .el-button {
    
26.   width: 100%;
    
27.   margin-top: 1rem;
    
28. }
    
29. 
    
30. .links {
    
31.   margin-top: 1.5rem;
    
32.   display: flex;
    
33.   justify-content: space-between;
    
34.   
    
35.   a {
    
36.     color: #409eff;
    
37.     text-decoration: none;
    
38.     transition: color 0.3s;
    
39. 
    
40.     &:hover {
    
41.       color: #66b1ff;
    
42.     }
    
43.   }
    
44. }
    
45. </style>

复制代码

三、进阶功能实现

• 路由守卫配置
  

1. // router/index.js
   
2. router.beforeEach((to) => {
   
3.   const isAuthenticated = sessionStorage.getItem('token')
   
4.   
   
5.   if (to.meta.requiresAuth && !isAuthenticated) {
   
6.     return '/login'
   
7.   }
   
8.   
   
9.   if (to.path === '/login' && isAuthenticated) {
   
10.     return '/dashboard'
    
11.   }
    
12. })

复制代码

• 安全增强方案
  
  
  
  • 密码加密传输（使用crypto-js）
    
  • 添加验证码功能
    
  • 请求限流与防重放攻击
    
  
  

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

复制代码

• 第三方登录集成
  

1. <template>
   
2.   <div class="oauth-login">
   
3.     <el-divider>第三方登录</el-divider>
   
4.     <div class="oauth-buttons">
   
5.       <el-button @click="handleWechatLogin">
   
6.         <svg-icon icon-class="wechat" />
   
7.         微信登录
   
8.       </el-button>
   
9.     </div>
   
10.   </div>
    
11. </template>

复制代码

四、最佳实践与注意事项

• 表单验证优化
  
  
  
  •   异步验证手机号是否注册
    
  • 密码强度实时检测
    
  
  

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

复制代码

• 用户体验优化
  
  
  
  • 自动填充最近登录账号
    
  • 记住密码功能（加密存储）
    
  • 加载状态管理
    
  
  

1. // 自动填充
   
2. const lastUsername = localStorage.getItem('lastUsername')
   
3. if (lastUsername) form.username = lastUsername
   
4. 
   
5. // 记住密码
   
6. const savePassword = ref(false)
   
7. watch(savePassword, (val) => {
   
8.   if (val) {
   
9.     localStorage.setItem('remembered', JSON.stringify(form))
   
10.   } else {
    
11.     localStorage.removeItem('remembered')
    
12.   }
    
13. })

复制代码

• 错误处理规范
  

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

复制代码

五、典型问题解决方案

• 跨域问题处理
  

1. // vite.config.js
   
2. export default defineConfig({
   
3.   server: {
   
4.     proxy: {
   
5.       '/api': {
   
6.         target: 'http://backend.example.com',
   
7.         changeOrigin: true,
   
8.         rewrite: (path) => path.replace(/^\/api/, '')
   
9.       }
   
10.     }
    
11.   }
    
12. })

复制代码

• 响应式布局适配
  

1. @media (max-width: 768px) {
   
2.   .login-container {
   
3.     padding: 1rem;
   
4.    
   
5.     :deep(.el-form) {
   
6.       width: 100%;
   
7.       margin: 0 1rem;
   
8.     }
   
9.   }
   
10. }

复制代码

• 浏览器兼容问题
  
  
  
  • 使用@vitejs/plugin-legacy处理ES6+语法
    
  • 添加autoprefixer自动补全CSS前缀
    
  
  

到此这篇关于使用Vue开发登录页面的完整指南的文章就介绍到这了,更多相关Vue开发登录页面内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源：https://www.jb51.net/javascript/339962oz9.htm
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！