第二章：创建登录页面

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-input
                    v-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-input
                    v-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;
}