Registro de proyectos de combate reales en el fondo de vite (3)

1. Diseño de la página de inicio de sesión

1.1 Crear el componente Login.vue

1.2 Configurar enrutamiento

enrutador index.js

//1. 导入vue-router相关函数
import { createRouter, createWebHashHistory } from "vue-router"
// 导入页面组件
import Home from "~/views/Home.vue"
import Login from "~/views/Login.vue"
import NotFound from "~/views/Page404.vue"
// 2.路由规则
const routes = [
1.3 Login.vue组件开发
（1）引入字体图标
   {
        path: "/",
        redirect: "/home"
   },
   {
        path: "/home",
        name: Home,
        component: Home
   },
   {
        path: "/login",
        name: Login,
        component: Login
   },
   {
        path: '/:pathMatch(.*)*',
        name: 'NotFound',
        component: NotFound
   },
]
// 3.路由对象实例化
const router = createRouter({
    history: createWebHashHistory(),
    routes
})
// 暴露导出
export default router

1.3 Desarrollo del componente Login.vue

(1) Introduciendo iconos de fuentes

 npm instalar @element-plus/icons-vue

(2) Usar íconos de fuente

Importe el icono de icono a pedido en el componente actual

importar { UserFilled } de "@element-plus/icons-vue" ;

Importe el ícono del ícono globalmente en main.js

import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

Utilice el componente de icono en forma de componente Login.vue a través de la ranura

<template #prefix>
    <el-icon><UserFilled /></el-icon>
</template>

(3) Código fuente de diseño del componente Login.vue

<!-- 视图层 -->
<template>
  <el-row class="min-h-screen bg-indigo-500">
    <el-col :span="16" class="flex items-center justify-center">
      <div>
        <div class="font-bold text-5xl text-light-50 mb-4">欢迎光临
</div>
        <div class="text-gray-200 text-sm">《vue3商城后台管理系统》
</div>
        <el-icon><Lock /></el-icon>
      </div>
    </el-col>
    <el-col
      :span="8"
      class="bg-light-50 flex items-center justify-center flex-col"
    >
      <h2 class="font-bold text-3xl text-gray-800">欢迎回来</h2>
      <div
        class="flex items-center justify-center my-5 text-gray-300
space-x-2"
      >
        <span class="h-[1px] w-16 bg-gray-200"></span>
        <span>账号密码登录</span>
        <span class="h-[1px] w-16 bg-gray-200"></span>
      </div>
      <el-form :model="form" class="w-[250px]">
        <el-form-item>
          <el-input v-model="form.username" placeholder="请输入用户
名">
            <template #prefix>
              <el-icon><UserFilled /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="form.password" placeholder="请输入密
码">
            <template #prefix>
              <el-icon><Lock /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            round
            color="#626aef"
            class="w-[250px]"
            type="primary"
            @click="onSubmit"
            >登 录</el-button
          >
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>
<!-- 逻辑层 -->
<script setup>
import { reactive } from "vue";
// 导入icon图标
// import { Lock, UserFilled } from "@element-plus/icons-vue";
// do not use same name with ref
const form = reactive({
  username: "",
  password: "",
});
const onSubmit = () => {
  console.log("submit!");
};
</script>
<!-- 样式层 -->
<style lang="" scoped>
</style>

2. Validación del formulario

:rules="rules" reglas vinculantes

ref="formRef" Obtiene el objeto de instancia del componente de formulario el-form

prop="username" asocia el objeto especificado

show-password ícono de visualización de contraseña --- ojos pequeños

<el-form :rules="rules" ref="formRef" :model="form" class="w-[250px]">
        <el-form-item prop="username">
          <el-input v-model="form.username" placeholder="请输入用户
名">
            <template #prefix>
              <el-icon><UserFilled /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            type="password"
            v-model="form.password"
            placeholder="请输入密码"
            show-password
          >
            <template #prefix>
              <el-icon><Lock /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            round
            color="#626aef"
            class="w-[250px]"
            type="primary"
            @click="onSubmit"
            >登 录</el-button
          >
        </el-form-item>
      </el-form>
import { reactive, ref } from "vue";
const form = reactive({
  username: "",
  password: "",
});
// 验证规则
const rules = {
  username: [
   {
      required: true,
      message: "用户名不能为空",
      trigger: "blur",
   },
 ],
  password: [
   {
      required: true,
      message: "密码不能为空",
      trigger: "blur",
   },
 ],
};
// 获取form元素节点对象
const formRef = ref(null);
const onSubmit = () => {
  formRef.value.validate((valid) => {
    if (!valid) {
      return false;
   }
    console.log("验证通过");
 });
};

representaciones