推广展示类网站用我在线网站建设
1.删除创建项目默认代码
项目启动，默认是以下页面
代码所在目录 src>components>HelloWorld.vue
直接删除此文件就可以，同时进入app.vue文件，重置此页面代码
代码改为一下
<template><router-view />
</template>
<script setup lang="ts"></script>
<style scoped lang="less"></style>2.创建登录页面文件
在src目录下面创建views文件夹存放页面文件
创建login.vue作为登录页面，并初始化页面代码（部分开发软件创建vue会自动生成初始化代码）
<template></template>
<script lang="ts" setup></script>
<style lang="less" scoped></style>3.配置router文件
path:'/',代表是项目启动初始化页面
注：如果配置完成页面显示空白，查看main.ts文件是否引入router文件 ，如果引入还未显示，查看app.use(router)代码是否在app.mount('#app')代码之前，如果在此代码后，则修改前置
正确格式如下
4.编写login.vue 代码
<template><div id="login"><el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form" label-position='top' :hide-required-asterisk='true'><div class="title"><h1>欢迎登录</h1></div><el-form-item prop="userName" label="账号"><el-inputv-model="loginForm.userName"type="text"size="large"auto-complete="off"placeholder="请输入账号"><template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template></el-input></el-form-item><el-form-item prop="password" label="密码"><el-inputv-model="loginForm.password"type="password"size="large"auto-complete="off"placeholder="请输入密码"show-password@keyup.enter="handleLogin"><template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template></el-input></el-form-item><el-form-item style="width: 100%"><el-button:loading="loading"size="large"type="primary"style="width: 100%"@click.prevent="handleLogin"><span v-if="!loading">登 录</span><span v-else>登 录 中...</span></el-button></el-form-item></el-form></div>
</template>
<script lang="ts" setup>
import { FormInstance } from 'element-plus';
import { reactive, ref } from 'vue';
const loading = ref(false);const loginForm = reactive({userName: '',password: ''
})
const loginRules = {userName: [{ required: true, trigger: 'blur', message: '请输入您的账号' }],password: [{ required: true, trigger: 'blur', message: '请输入您的密码' }],code: [{ required: true, trigger: 'change', message: '请输入验证码' }],
};
const loginRef = ref<FormInstance>();
function handleLogin(){loginRef.value?.validate(valid => {})
}
</script>
<style lang="less" scoped>
#login{display: flex;justify-content: end;align-items: center;height: 100%;background-image: url('../assets/image/login-background.jpg');background-size: cover;padding-right: 228px;.login-form {border-radius: 6px;background: #ffffff;width: 400px;padding: 25px 25px 5px 25px;.el-input {height: 40px;input {height: 40px;}}.input-icon {height: 39px;width: 14px;margin-left: 0px;}
}
.login-tip {font-size: 13px;text-align: center;color: #bfbfbf;
}
.login-code {width: 33%;height: 40px;float: right;img {cursor: pointer;vertical-align: middle;}
}
.el-login-footer {height: 40px;line-height: 40px;position: fixed;bottom: 0;width: 100%;text-align: center;color: #fff;font-family: Arial;font-size: 12px;letter-spacing: 1px;
}
.login-code-img {height: 40px;padding-left: 12px;
}
::v-deep .el-form{width: 478px;padding: 50px;.title{display: flex;align-items: center;justify-content: center;img{width: 80px;height: 80px;margin-bottom: 18px;}h1{font-size: 32px;color: #1B1E24;font-weight: bolder;margin-bottom: 6px;}h3{font-size: 20px;color: #727272;margin-bottom: 30px;}}.el-form-item__label{font-weight: initial;}.el-form-item:last-child{margin-top: 46px;}
}
}
</style>5.可能出现问题
设置父级代码（最外层）宽高为100%不生效？
解决方式：修改src文件下的style.css代码，给html，body增加样式宽高为100%
html,body{width: 100%;height: 100%;
}6.初始化css样式代码
因为可能会出现上述5的问题，提供一下初始化代码，可以在上述css文件全量替换，看自己情况，酌情考虑是否使用一下初始化代码样式
*{padding: 0;margin: 0;box-sizing: border-box;
}
html,body{width: 100%;height: 100%;overflow: hidden;
}
#app{width: 100%;height: 100%;overflow-x: auto;
}
HTML, body, div, ul, ol, dl, li, dt, dd, p, blockquote,
pre, form, fieldset, table, th, td {border:none;font-family:"微软雅黑","黑体","宋体";font-size:14px;margin:0px;padding:0px;
}
address, caption, cite, code, dfn, em, strong, th, var {font-style: normal;font-weight: normal;
}
a{text-decoration:none;
}
a:link{color:#fff;
}
a:visited{color:#fff;
}
a:hover{color:#fff;
}
a:active{color:#fff;
}
input::-ms-clear{display:none;
}
input::-ms-reveal{display:none;
}
input{-webkit-appearance: none;margin: 0;outline: none;padding: 0;
}
input::-webkit-input-placeholder{color: #ccc;
}
input::-ms-input-placeholder{color: #ccc;
}
input::-moz-placeholder{color: #ccc;
}
input[type=submit],input[type=button]{cursor: pointer;
}
button[disabled], input[disabled] {cursor: default;
}
img{border:none;
}
ul,ol,li{list-style-type:none;
}
/*公共方法*/
.clear{clear: both;
}
.clearleft{clear: left;
}
.clearright{clear: right;
}
.floatleft{float: left;
}
.floatright{float: right;
}
.cursor{cursor: pointer;
}
/*背景及色值表*/
.bg000{background: #000;
}
.color000{color: #000;
}
.content{flex: 1;}
.content-box{width: 100%;height: 100%;background: #fff;border-radius: 10px;padding: 20px;
}
.title{font-weight: bolder;font-size: 24px;text-indent: initial !important;
}
h1,h2,h3,h4,h5{margin-bottom: 10px;
}
/* 可以添加一些样式来美化代码显示 */
pre {background-color: #f8f8f8;border: 1px solid #ddd;border-radius: 4px;padding: 10px;overflow-x: auto;
}
code {font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;font-size: 12px;color: #333333;text-align: left;
}