vue3+ts+elementplus写一个登录页面教程

简介: 【6月更文挑战第3天】本文介绍了如何使用 Vue 3 和 TypeScript 创建一个登录页面。首先,需安装 Vue CLI,然后创建新项目并启用 TypeScript 支持。接着,创建 `Login.vue` 组件,设计登录表单,包括用户账号、密码和验证码字段,并实现相关验证规则。页面样式包括背景、登录框和按钮等元素的布局与样式。最后,展示了`<script>`部分的代码,包括表单验证逻辑、生成验证码的函数以及登录提交处理。文章还提供了一个登录页面的截图和完整代码示例。

前言

前期准备步骤:

创建一个使用 Vue 3 和 TypeScript 的登录页面涉及到多个步骤。以下是一个基本的教程,帮助你从头开始构建这样一个页面:

1. 安装 Vue CLI 和 TypeScript 支持

首先,你需要安装 Vue CLI 并配置它以支持 TypeScript。如果你还没有安装 Vue CLI,可以通过以下命令进行安装:

npm install -g @vue/cli  
# OR  
yarn global add @vue/cli

然后,你可以创建一个新的 Vue 3 项目并启用 TypeScript 支持:

vue create my-login-app

在创建过程中,选择 “Manually select features”,然后勾选 “TypeScript” 和其他你需要的特性(比如 Router、Linter/Formatter 等)。

2. 创建登录组件

在 src/views目录下创建一个新的 TypeScript 文件,比如 Login.vue。这个文件将包含你的登录表单和逻辑。

文章重点内容

页面样式:

页面代码:

<div class="login-right-warp">
        <div class="login-right-warp-title">login</div>
        <div class="login-right-warp-form">
          <div class="login-right-warp-form_title">用户名登录</div>
          <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" status-icon :rules="rules"
            label-width="auto" class="demo-ruleForm">
            <el-form-item prop="AccountNo">
              <el-input v-model="ruleForm.AccountNo" autocomplete="off" :prefix-icon="User"
                placeholder="请输入账号" />
            </el-form-item>
            <el-form-item prop="AccountPwd">
              <el-input v-model="ruleForm.AccountPwd" type="password" autocomplete="off" :prefix-icon="Lock"
                placeholder="请输入密码" />
            </el-form-item>
            <el-form-item prop="Code">
              <el-input v-model.number="ruleForm.Code" :prefix-icon="Promotion" class="login-content-code"
                placeholder="请输入验证码" />
              <span class="login-content-code-img" @click="generateCodeAsync()">{{ verificationCode.Code
              }}</span>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm(ruleFormRef)">登录</el-button>
            </el-form-item>
          </el-form>
          <div class="login-msg">* 温馨提示:建议使用谷歌、Microsoft Edge,版本 79.0.1072.62 及以上浏览器,360浏览器请使用极速模式</div>
        </div>
      </div>

script代码:

import { reactive, onMounted, ref } from 'vue';
import type { FormInstance, FormRules } from 'element-plus';
import { User, Lock, Promotion } from '@element-plus/icons-vue';
import { postLoginAsync, postGenerateCodeAsync } from '@/api/login';
import { useRouter } from 'vue-router';
// 使用 Vue Router 的 useRouter 函数来获取 router 实例
const router = useRouter();
const ruleFormRef = ref<FormInstance>();
// 页面加载时
onMounted(() => {
  generateCodeAsync();
});
const validateCodeKey = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入验证码'));
  } else {
    callback();
  }
};
const validateAccountNo = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入账号'));
  } else {
    callback();
  }
};
const validateAccountPwd = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入密码'));
  } else {
    callback();
  }
};
const ruleForm = reactive({
  AccountNo: '123',
  AccountPwd: '',
  CodeKey: '',
  Code: '',
});
const verificationCode = reactive({
  CodeKey: '',
  Code: '',
});
const rules = reactive<FormRules<typeof ruleForm>>({
  AccountNo: [{ validator: validateAccountNo, trigger: 'blur' }],
  AccountPwd: [{ validator: validateAccountPwd, trigger: 'blur' }],
  Code: [{ validator: validateCodeKey, trigger: 'blur' }],
});
const generateCodeAsync = () => {
  postGenerateCodeAsync().then((res: any) => {
    verificationCode.Code = res.Data.Code;
    verificationCode.CodeKey = res.Data.Key;
    ruleForm.CodeKey = res.Data.Key;
  });
};
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      console.log('submit!');
      router.push('/home');
    } else {
      console.log('error submit!');
      return false;
    }
  });
};
</script>

样式代码:

.login {
  width: 100vw;
  height: 100vh;
  background: #fff;
  .login-left {
    .login-left-logo {
      display: flex;
      align-items: center;
      position: absolute;
      top: 50px;
      left: 80px;
      z-index: 1;
      animation: logoAnimation 0.3s ease;
      img {
        width: 100px;
        height: 64px;
      }
      .login-left-logo-text {
        display: flex;
        flex-direction: column;
      }
      .login-left-logo-text span {
        margin-left: 10px;
        font-size: 30px;
        font-weight: 700;
        color: #de2910;
      }
      .login-left-logo-text .login-left-logo-text-msg {
        font-size: 12px;
        color: #de2910;
      }
    }
    .login-left-img {
      width: 90%;
      margin: 70px 0 0px 10%;
      height: 90%;
      min-height: 500px;
      min-width: 500px;
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        height: 500px;
        min-width: 500px;
      }
    }
  }
  .login-right {
    width: 650px;
    .login-right-warp {
      border: 1px solid #e76959;
      border-radius: 3px;
      width: 500px;
      height: 550px;
      position: relative;
      overflow: hidden;
      background-color: #fff;
      margin: auto;
      .login-right-warp-title {
        height: 130px;
        line-height: 130px;
        font-size: 32px;
        font-weight: 800;
        text-align: center;
        animation: logoAnimation 0.3s ease;
        animation-delay: 0.3s;
        color: #f00;
      }
      .login-right-warp-form {
        padding: 0 50px 50px;
      }
      .login-right-warp-form_title {
        color: #de2910;
        width: 100%;
        padding: 10px 0px;
        border-bottom: 1px solid #e4e7ed;
        position: relative;
      }
      .login-right-warp-form_title::after {
        content: '';
        position: absolute;
        width: 90px;
        height: 2px;
        background: #de2910;
        bottom: 0;
        left: 0px;
      }
    }
    .el-form {
      margin-top: 30px;
    }
    .el-input {
      width: 100%;
      height: 40px;
    }
    .el-button {
      width: 100%;
      height: 40px;
      border-radius: 20px;
      background: #de2910;
      border: #de2910;
      margin: 20px 0px;
    }
    .login-content-code {
      width: 70%;
    }
    .login-content-code-img {
      width: 25%;
      background-color: #fff;
      border: 1px solid rgb(220, 223, 230);
      height: 38px;
      border-radius: 5px;
      margin-left: 4.5%;
      line-height: 38px;
      text-align: center;
      cursor: pointer;
    }
    .login-msg {
      margin-top: 30px;
      color: #a8abb2;
      font-size: 12px;
    }
  }
}

您好,我是肥晨。

欢迎关注我获取前端学习资源,日常分享技术变革,生存法则;行业内幕,洞察先机。

目录
相关文章
|
9天前
|
JavaScript 前端开发
在 JeecgBoot 项目中基于 Vue 3 配置多页面入口
本文介绍了在JeecgBoot Vue 3项目中配置多页面入口的步骤。首先,确保下载了项目源码,然后在项目根目录创建`home.html`作为新页面模板。接着,在`src`下建立`multiPage/home`目录,包含`App.vue`和`main.ts`文件以构建新页面。最后,更新`build/vite/plugin/html.ts`中的`htmlPlugin`以支持多页面配置。完成这些步骤后,项目将具备管理多个独立页面的能力。
22 4
|
14天前
【vue3】Argumnt of type ‘history:RouterHistory;}is not assignable to paraeter of type ‘RouterOptions‘.
【vue3】Argumnt of type ‘history:RouterHistory;}is not assignable to paraeter of type ‘RouterOptions‘.
9 0
|
14天前
|
JavaScript
【vue3】vue3中路由hash与History的设置
【vue3】vue3中路由hash与History的设置
15 0
|
1天前
|
缓存 JavaScript 算法
|
5天前
|
存储 JavaScript API
Vue 全局状态管理新宠:Pinia实战指南
 随着Vue.js项目的日益复杂,高效的状态管理变得至关重要。Pinia作为Vue.js官方推荐的新一代状态管理库,以其简洁的API和强大的功能脱颖而出。本文将带您快速上手Pinia,从安装到应用,轻松实现Vue.js项目的全局状态管理,提升开发效率和项目可维护性。
|
12天前
|
JavaScript
|
14天前
|
JavaScript
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
27 6
|
11天前
|
存储 缓存 JavaScript
vue代码优化方案
【7月更文挑战第13天】 **Vue.js 优化要点:** 分解大组件以提高复用性和加载速度;利用计算属性与侦听器优化数据处理;使用Object.freeze()减少响应式数据;借助Vuex或Composition API管理状态;实现虚拟滚动和无限加载提升长列表性能;路由懒加载减少初始加载时间;用Vue DevTools检测性能瓶颈;定期代码审查与重构;应用缓存策略;遵循最佳实践与团队规范,提升应用整体质量。
26 2