---

前言

前期准备步骤：
创建一个使用 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;}}
}

您好，我是肥晨。
欢迎关注我获取前端学习资源，日常分享技术变革，生存法则；行业内幕，洞察先机。