如何使用Vue3实现登录注册页面多种布局的6套源码案例, 完整vue代码，直接复制,免费领取

猫头虎

发布于 2025-03-16 20:40:51

31500

代码可运行

文章被收录于专栏：猫头虎博客专区猫头虎博客专区

运行总次数：0

代码可运行

Vue3实现登录注册页面多种布局6套源码案例,完整vue代码，直接复制

在现代Web应用程序中，登录和注册页面是每个网站的核心组成部分之一。无论是社交平台、在线购物网站，还是企业管理系统，良好的用户体验都离不开一个直观、易用的登录注册界面。因此，设计一个美观且功能强大的登录页面至关重要。为了提升用户体验，我们需要根据不同的需求和场景设计出多种布局，满足不同的设备和设计风格。

为何选择Vue3开发登录注册页面？

Vue3是一个进阶的JavaScript框架，它不仅能够帮助开发者提高开发效率，还能使得UI渲染更加高效。相较于其他传统的前端框架，Vue3提供了更强大的响应式特性，能够帮助开发者创建现代化的用户界面。在实现登录注册页面时，Vue3的功能优势，诸如Composition API、Vue Router以及高效的状态管理，使得开发者能够轻松实现复杂的UI交互与数据绑定。

正文

一、项目初始化

首先，确保你的项目已经安装了Vue 3。如果你还没有创建一个Vue 3项目，可以使用以下命令来初始化项目：

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

二、安装必要的依赖

为了简化样式和布局，我们可以安装一些UI组件库。这里我们使用的是Element Plus，你可以根据需求选择其他组件库。

npm install element-plus

在src/main.js中引入Element Plus：

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

createApp(App).use(ElementPlus).mount('#app')

三、布局一：经典单列布局

经典单列布局适用于大多数传统应用，它简单、直接，适合桌面端和移动端。

Login.vue:

<template>
  <div class="login-container">
    <el-card class="login-card">
      <h2>登录</h2>
      <el-form :model="form" ref="form" label-position="top">
        <el-form-item label="用户名" prop="username" :rules="[{ required: true, message: '请输入用户名', trigger: 'blur' }]">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password" :rules="[{ required: true, message: '请输入密码', trigger: 'blur' }]">
          <el-input type="password" v-model="form.password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleLogin">登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    handleLogin() {
      console.log('登录', this.form);
    }
  }
}
</script>

<style scoped>
.login-container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f5f5;
}

.login-card {
  width: 300px;
  padding: 20px;
}
</style>

四、布局二：左右分栏布局

这种布局适合一些需要展示图片或者广告的应用，比如社交媒体或者新闻网站。

Login.vue:

<template>
  <div class="login-wrapper">
    <div class="login-left">
      <img src="https://via.placeholder.com/400x600" alt="广告图">
    </div>
    <div class="login-right">
      <el-card class="login-card">
        <h2>登录</h2>
        <el-form :model="form" ref="form" label-position="top">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="form.username"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="form.password"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleLogin">登录</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    handleLogin() {
      console.log('登录', this.form);
    }
  }
}
</script>

<style scoped>
.login-wrapper {
  display: flex;
  height: 100vh;
}

.login-left {
  flex: 1;
  background-color: #f5f5f5;
}

.login-right {
  width: 300px;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-card {
  width: 100%;
}
</style>

五、布局三：顶部导航布局

这种布局适合需要带有顶部导航栏的登录页面。常见于一些企业管理后台或其他复杂应用。

Login.vue:

<template>
  <div>
    <el-header class="header">
      <div class="logo">My App</div>
    </el-header>
    <div class="login-container">
      <el-card class="login-card">
        <h2>登录</h2>
        <el-form :model="form" ref="form" label-position="top">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="form.username"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="form.password"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleLogin">登录</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    handleLogin() {
      console.log('登录', this.form);
    }
  }
}
</script>

<style scoped>
.header {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 20px;
}

.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.login-card {
  width: 300px;
  padding: 20px;
}
</style>

六、布局四：简洁顶部浮动布局

这个布局适用于一些简单的应用，常见于需要快速展示登录表单的页面。

Login.vue:

<template>
  <div class="login-wrapper">
    <el-card class="login-card">
      <h2>登录</h2>
      <el-form :model="form" ref="form" label-position="top">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="form.password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleLogin">登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    handleLogin() {
      console.log('登录', this.form);
    }
  }
}
</script>

<style scoped>
.login-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5);
}

.login-card {
  width: 300px;
  padding: 20px;
}
</style>

七、布局五：卡片式并排布局

这种布局适用于展示多个登录、注册等选项，常用于一些复杂的业务场景，允许用户选择不同的操作。

Login.vue:

<template>
  <div class="login-wrapper">
    <el-row gutter="20">
      <el-col :span="12">
        <el-card class="login-card">
          <h2>登录</h2>
          <el-form :model="form" ref="form" label-position="top">
            <el-form-item label="用户名" prop="username">
              <el-input v-model="form.username"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input type="password" v-model="form.password"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleLogin">登录</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="login-card">
          <h2>注册</h2>
          <el-form :model="form" ref="form" label-position="top">
            <el-form-item label="用户名" prop="username">
              <el-input v-model="form.username"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input type="password" v-model="form.password"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="confirmPassword">
              <el-input type="password" v-model="form.confirmPassword"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleRegister">注册</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: '',
        confirmPassword: ''
      }
    }
  },
  methods: {
    handleLogin() {
      console.log('登录', this.form);
    },
    handleRegister() {
      console.log('注册', this.form);
    }
  }
}
</script>

<style scoped>
.login-wrapper {
  padding: 50px;
}

.login-card {
  width: 100%;
  padding: 20px;
}
</style>

解析：

在这个布局中，我们使用了Element Plus的el-row和el-col组件实现了并排显示两个卡片：一个用于登录，另一个用于注册。该布局适合需要同时提供登录和注册功能的页面。

八、布局六：全屏背景图登录页

这种布局适用于需要美观的背景图和简洁登录表单的应用，通常用于品牌展示、广告页面或产品推广。

Login.vue:

<template>
  <div class="login-wrapper">
    <div class="login-overlay">
      <el-card class="login-card">
        <h2>登录</h2>
        <el-form :model="form" ref="form" label-position="top">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="form.username"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="form.password"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleLogin">登录</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    handleLogin() {
      console.log('登录', this.form);
    }
  }
}
</script>

<style scoped>
.login-wrapper {
  position: relative;
  width: 100%;
  height: 100vh;
  background: url('https://via.placeholder.com/1920x1080') no-repeat center center/cover;
}

.login-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5);
}

.login-card {
  width: 300px;
  padding: 20px;
  color: white;
}
</style>

解析：

这个布局的特点是全屏背景图和居中的登录表单。通过给背景图加上透明遮罩层，我们确保表单内容仍然清晰可见。此布局非常适合那些需要视觉冲击力的应用或产品推广页面。

九、如何扩展这些布局？

这些布局可以根据具体需求进行扩展。比如：

增加表单验证： 使用Vue的v-model和el-form组件，可以轻松添加更多表单验证功能，比如邮箱格式、密码强度等。
添加动态主题切换： 可以使用Vue的响应式数据和CSS类动态修改页面样式，实现夜间模式或自定义主题。
集成第三方登录： 使用OAuth或JWT实现Facebook、Google等第三方账号的登录集成。

总结

本文展示了六种不同的登录注册页面布局，分别适用于不同场景和需求。每种布局都包含了Vue3的实现代码，方便大家快速复制使用。根据实际需求，你可以选择合适的布局并进行自定义扩展，构建更加丰富和美观的登录注册页面。

希望这篇文章对你学习和使用Vue3开发UI布局有所帮助。如果你有任何问题，欢迎在评论区留言！

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2025-03-15，如有侵权请联系 cloudcommunity@tencent.com 删除

布局

源码

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

布局

源码

登录后参与评论

0 条评论

热度