1. Login page layout
1.1 Create Login.vue component
1.2 Configure routing
router 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 Login.vue component development
(1) Introducing font icons
npm install @element-plus/icons-vue
(2) Use font icons
Import the icon icon on demand in the current component
import
{
UserFilled
}
from
"@element-plus/icons-vue"
;
Import the icon icon globally in 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)
}
Use the icon component in the form of the component Login.vue through the slot
<template #prefix>
<el-icon><UserFilled /></el-icon>
</template>
(3) Login.vue component layout source code
<!-- 视图层 -->
<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. Form validation
:rules="rules" binding rules
ref="formRef" Get the instance object of the el-form form component
prop="username" associates the specified object
show-password password display icon --- small eyes
<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("验证通过");
});
};
renderings