开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第9天，点击查看活动详情

写在前面

上篇文章介绍了在vite+vue项目中编写路由权限验证，本篇文章介绍在vite+vue项目中编写登录页面的代码。

完成效果如下：

相关代码在整个项目搭建完成后会放到gitee上，到时可以拉下来看，现在还没什么内容，就先不放了。

登录页面

html和css相关的代码大家肯定是没有问题的，我这里就针对没用过Vue3和TypeScript的同学说说要注意的部分。

首先，登录表单的代码是大致是从element plus那里拷贝过来，然后根据自己的项目进行的修改，相信大家都能看懂，和element有区别的是图标的使用，例如：在本项目中使用User图标代码如下，先要在ts中引入要使用的图标：

// html中使用
<el-input
  v-model="ruleForm.userName"
  placeholder="请输入用户名"
  :prefix-icon="User"
/>

// ts中引入要用的图标
import { User, Lock } from "@element-plus/icons-vue";

还是就是表单提交的时候要传的字段有点差别，代码如下，原来是传一个ref名字的字符串就行，现在也需要先在ts中定义：

// html中传的是在setup中定义的ruleFormRef
<el-button type="primary" @click="handleLogin(ruleFormRef)"
  >登 录</el-button
>

// setup ts中定义ruleFormRef
import type { FormInstance } from "element-plus";
const ruleFormRef = ref<FormInstance>();

完整代码如下，记住密码和登录的逻辑代码还没有写，下篇文章我们就开始编写记住密码和登录的逻辑代码：

<template>
  <div class="login_wrap">
    <div class="login_form">
      <div class="form_lt"></div>
      <div class="form_rt">
        <div class="form_title">欢迎回来</div>
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          label-width="0px"
          status-icon
          class="form_box"
        >
          <el-form-item prop="userName">
            <el-input
              v-model="ruleForm.userName"
              placeholder="请输入用户名"
              :prefix-icon="User"
            />
          </el-form-item>
          <el-form-item prop="passWord">
            <el-input
              v-model="ruleForm.passWord"
              type="password"
              placeholder="请输入密码"
              show-password
              :prefix-icon="Lock"
            />
          </el-form-item>
        </el-form>
        <div class="login_remember">
          <el-checkbox v-model="isRememberPW" label="记住密码" />
        </div>
        <div class="login_btn">
          <el-button type="primary" @click="handleLogin(ruleFormRef)"
            >登 录</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { User, Lock } from "@element-plus/icons-vue";

const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive({
  userName: "",
  passWord: "",
});
const rules = reactive<FormRules>({
  userName: [{ required: true, message: "请输入用户名", trigger: "change" }],
  passWord: [
    {
      required: true,
      message: "请输入密码",
      trigger: "change",
    },
    { min: 3, max: 20, message: "长度应为3-20", trigger: "blur" },
  ],
});

let isRememberPW = ref(true);

const handleLogin = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("isRememberPW", isRememberPW.value);
      console.log("ruleForm", ruleForm);
    }
  });
};
</script>

<style lang="less" scoped>
.login_wrap {
  position: relative;
  width: 100%;
  height: 100vh;
  background-color: #eaecee;
  background-image: url(../assets/imgs/login_bg.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  .login_form {
    position: absolute;
    top: 50%;
    width: 1200px;
    height: 500px;
    left: 50%;
    background-image: url(../assets/imgs/form_bg.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    transform: translate3d(-50%, -50%, 0);
    display: flex;
    .form_lt {
      flex: 1;
      background-image: url(../assets/imgs/form_lt.png);
      background-size: 100% auto;
      background-repeat: no-repeat;
      margin: 60px 0 0 60px;
    }
    .form_rt {
      flex: 1;
      margin: 60px 40px;
      .form_title {
        color: #444;
        font-weight: bold;
        font-size: 26px;
        padding-left: 40px;
      }
      .form_box {
        padding: 60px 0 0 40px;
        width: 340px;
      }
      .login_remember {
        padding: 0 0 0 40px;
      }
      .login_btn {
        padding: 10px 0 0 40px;
        width: 340px;
        .el-button {
          width: 100%;
        }
      }
    }
    .el-form-item {
      margin-bottom: 20px;
    }
  }
}
</style>

写在最后

以上就是在vite+vue项目中编写登录页面的所有代码和说明

vite+vue项目之编写登录页面的代码

写在前面

登录页面

写在最后