随着现代前端框架的发展，Vue 3 以其优雅的写法和高效的性能赢得了许多开发者的青睐。而 Element Plus 作为一款基于 Vue 3 的 UI 组件库，为我们提供了丰富且美观的组件，使得构建用户注册和登录界面变得更加简单而高效。在本篇博文中，我们将详细介绍如何使用 Vue 3 和 Element Plus 来构建一个用户注册和登录界面。
环境准备
-
确保你已经安装了 Node.js：可以在终端中运行
node -v查看 Node.js 版本，建议使用最新的 LTS 版本。 -
初始化 Vue 项目：使用 Vue CLI 创建新的 Vue 项目。
npm install -g @vue/cli vue create vue-auth-demo在项目创建过程中，选择 Vue 3。
-
安装 Element Plus：
cd vue-auth-demo npm install element-plus -
安装 Vue Router：方便我们在不同页面间导航。
npm install vue-router
创建项目结构
接下来，我们需要构建项目结构。我们将在 src/views 目录下创建两个文件：Login.vue 和 Register.vue。
同时，我们还需要配置 Vue Router 以便实现页面切换。让我们集中在我们的 Vue 组件和样式上。
1. 配置 Vue Router
在 src/router/index.js 中配置路由：
import { createRouter, createWebHistory } from 'vue-router';
import Login from '../views/Login.vue';
import Register from '../views/Register.vue';
const routes = [
{
path: '/',
name: 'Login',
component: Login,
},
{
path: '/register',
name: 'Register',
component: Register,
},
];
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes,
});
export default router;
2. 创建登录界面
在 src/views/Login.vue 中编写登录界面的代码：
<template>
<div class="login-container">
<el-card class="login-card">
<h2 class="login-title">用户登录</h2>
<el-form :model="loginForm" ref="loginForm" :rules="rules" label-width="100px">
<el-form-item label="邮箱" prop="email">
<el-input v-model="loginForm.email" placeholder="请输入邮箱"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="loginForm.password" placeholder="请输入密码"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleLogin">登录</el-button>
<el-button @click="goToRegister">注册</el-button>
</el-form-item>
</el-form>
</el-card>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
const loginForm = ref({
email: '',
password: '',
});
const rules = {
email: [
{ required: true, message: '请输入邮箱', trigger: 'blur' },
{ type: 'email', message: '邮箱格式不正确', trigger: ['blur', 'change'] },
],
password: [{ required: true, message: '请输入密码 trigger: 'blur' }],
};
const router = useRouter();
const handleLogin = () => {
const { email, password } = loginForm.value;
console.log('登录:', email, password);
ElMessage.success('登录成功！');
};
const goToRegister = () => {
router.push('/register');
};
</script>
<style scoped>
.login-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.login-card {
width: 400px;
}
</style>
3. 创建注册界面
在 src/views/Register.vue 中编写注册界面的代码：
<template>
<div class="register-container">
<el-card class="register-card">
<h2 class="register-title">用户注册</h2>
<el-form :model="registerForm" ref="registerForm" :rules="rules" label-width="100px">
<el-form-item label="邮箱" prop="email">
<el-input v-model="registerForm.email" placeholder="请输入邮箱"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="registerForm.password" placeholder="请输入密码"></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="confirmPassword">
<el-input type="password" v-model="registerForm.confirmPassword" placeholder="请确认密码"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleRegister">注册</el-button>
<el-button @click="goToLogin">登录</el-button>
</el-form-item>
</el-form>
</el-card>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
const registerForm = ref({
email: '',
password: '',
confirmPassword: '',
});
const rules = {
email: [
{ required: true, message: '请输入邮箱', trigger: 'blur' },
{ type: 'email', message: '邮箱格式不正确', trigger: ['blur', 'change'] },
],
password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
confirmPassword: [
{ required: true, message: '请确认密码', trigger: 'blur' },
{
validator: (rule, value, callback) => {
if (value !== registerForm.value.password) {
callback(new Error('两次密码不一致'));
} else {
callback();
}
},
trigger: 'blur',
},
],
};
const router = useRouter();
const handleRegister = () => {
const { email, password } = registerForm.value;
console.log('注册:', email, password);
ElMessage.success('注册成功！');
};
const goToLogin = () => {
router.push('/');
};
</script>
<style scoped>
.register-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.register-card {
width: 400px;
}
</style>
完成主应用程序
在 src/App.vue 中配置主应用程序以包含路由：
<template>
<router-view />
</template>
<script setup>
import { defineComponent } from 'vue';
export default defineComponent({});
</script>
<style>
body {
margin: 0;
font-family: Avenir, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #2c3e50;
background-color: #f5f5f5;
}
</style>
启动项目
在终端中运行以下命令以启动应用程序：
npm run serve
在浏览器中访问 http://localhost:8080，可以看到我们构建的登录和注册界面。
总结
在本文中，我们使用 Vue 3 和 Element Plus 创建了用户注册和登录界面。通过简洁的代码以及使用 Element Plus 组件，我们不仅提高了开发效率，还实现了美观的界面。你可以在此基础上进一步拓展功能，例如接入后端 API，实现真正的用户验证功能。
最后问候亲爱的朋友们，并邀请你们阅读我的全新著作
