登录模块的静态登录

🧩 一、模板部分（Template）

1. <el-form> 容器

vue

复制

<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules">

• ref="ruleFormRef"：
  拿到整个 el-form 的实例，方便在脚本里调用 .validate() 进行整表校验。

• :model="ruleForm"：
  告诉 el-form「我的数据对象叫 ruleForm」，组件内部才能做校验。

• :rules="rules"：
  把「校验规则对象」传进去。

---

2. 用户名输入框

vue

复制

<el-form-item label="" prop="username"><el-input v-model="ruleForm.username" ... >

• prop="username"：
  关联 rules.username，校验触发时知道要检查 ruleForm.username。

• v-model="ruleForm.username"：
  双向绑定，输入框内容与 ruleForm.username 实时同步。

• #prefix 插槽：
  输入框左侧放一个小图标，用的是 Element Plus 的 <UserFilled />。

---

3. 密码输入框

vue

复制

<el-input v-model="ruleForm.password" :type="passwordType" ... >

• v-model="ruleForm.password"：
  同理，绑定到 ruleForm.password。

• :type="passwordType"：
  动态切换 type="password"（密文）或 type="text"（明文）。

• #prefix 插槽：
  放 <