使用Vue3和Element Plus构建用户注册和登录界面

随着现代前端框架的发展，Vue 3 以其优雅的写法和高效的性能赢得了许多开发者的青睐。而 Element Plus 作为一款基于 Vue 3 的 UI 组件库，为我们提供了丰富且美观的组件，使得构建用户注册和登录界面变得更加简单而高效。在本篇博文中，我们将详细介绍如何使用 Vue 3 和 Element Plus 来构建一个用户注册和登录界面。

环境准备

1. 确保你已经安装了 Node.js：可以在终端中运行node -v 查看 Node.js 版本，建议使用最新的 LTS 版本。

2. 初始化 Vue 项目：使用 Vue CLI 创建新的 Vue 项目。

   npm install -g @vue/cli
   vue create vue-auth-demo
   

   在项目创建过程中，选择 Vue 3。

3. 安装 Element Plus：

   cd vue-auth-demo
   npm install element-plus
   

4. 安装 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，实现真正的用户验证功能。

---

最后问候亲爱的朋友们，并邀请你们阅读我的全新著作