用vue3写一个后台管理系统的登录页面
时间: 2024-03-13 17:38:51 浏览: 14
以下是使用Vue3和Element Plus编写的后台管理系统登录页面的示例代码:
```vue
<template>
<div class="login-container">
<el-card class="login-card">
<h3 class="login-title">后台管理系统</h3>
<el-form :model="loginForm" :rules="loginRules" ref="loginForm" class="login-form">
<el-form-item prop="username">
<el-input v-model="loginForm.username" prefix-icon="el-icon-user" placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input v-model="loginForm.password" prefix-icon="el-icon-lock" type="password" placeholder="请输入密码"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" class="login-button" @click="login">登录</el-button>
</el-form-item>
</el-form>
</el-card>
</div>
</template>
<script>
import { defineComponent } from 'vue';
import { ElCard, ElForm, ElFormItem, ElInput, ElButton } from 'element-plus';
export default defineComponent({
name: 'Login',
components: {
ElCard,
ElForm,
ElFormItem,
ElInput,
ElButton,
},
data() {
return {
loginForm: {
username: '',
password: '',
},
loginRules: {
username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
},
};
},
methods: {
login() {
this.$refs.loginForm.validate((valid) => {
if (valid) {
// 登录逻辑
console.log('登录成功');
} else {
console.log('登录失败');
return false;
}
});
},
},
});
</script>
<style scoped>
.login-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f5f7fa;
}
.login-card {
width: 400px;
}
.login-title {
text-align: center;
margin-bottom: 20px;
}
.login-form {
margin-top: 20px;
}
.login-button {
width: 100%;
}
</style>
```