项目通用功能模块：

1，登录模块

思路如下：

1：首先绑定表单，把输入的用户名和 密码和接口提供的 用户名 和密码进行验证
2：如果验证通过，就跳转到后台首页面，
3：如果勾选了记住密码，验证checked为真，用localStorage这个函数下的setItem 这个api把用户名，密码和checked的值都存进去

代码：LoginView.vue

<template>
    <div class="Login">
        <div class="loginBlock">
            <h1>
                <img src="@/assets/img/logo (1).png" alt="">
                COOL-ADMIN
            </h1>
            <P>一款快速开发后台权限管理系统</P>
            <el-form label-position="left" label-width="0px" :model="user" :rules="rules">
                <p>用户名</p>
                <el-form-item label="" prop="name">
                    <el-input v-model="user.name" placeholder="请输入用户名"></el-input>
                </el-form-item>

                <p>密码</p>
                <el-form-item label="" prop="password">
                    <el-input v-model="user.password" show-password placeholder="请输入密码">
                    </el-input>
                </el-form-item>

                <p>验证码</p>
                <el-form-item label="" prop="yzm">
                    <el-input v-model="user.yzm" placeholder="验证码"></el-input>
                    <img src="http://dida100.com/include/vdimgck.php">
                </el-form-item>

                <el-form-item>

                    <el-button type="primary" @click="$store.dispatch('login', user)">登录
                    </el-button>
                </el-form-item>

            </el-form>
        </div>
    </div>
</template>
  
<script>
export default {
    
    
    data() {
    
    
        return {
    
    
            user: {
    
    
                name: "",
                password: "",
                yzm: ""
            },
            rules: {
    
    
                name: [{
    
    
                    required: true,
                    message: "请输入用户名",
                    trigger: 'blur'
                },
                {
    
    
                    min: 3,
                    max: 28,
                    message: '长度在3到28个字符',
                    trigger: 'blur'
                }
                ],
                password: [{
    
    
                    required: true,
                    message: "请输入密码",
                    trigger: 'blur'
                },
                {
    
    
                    min: 6,
                    max: 28,
                    message: '长度在6到28个字符',
                    trigger: 'blur'
                }
                ],
                yzm: [{
    
    
                    required: true,
                    message: "请输入验证码",
                    trigger: 'blur'
                },
                {
    
    
                    min: 4,
                    max: 4,
                    message: '长度4个字符',
                    trigger: 'blur'
                }
                ]
            }
        }
    }
}
</script>

<style lang="scss">
.Login {
    
    
    width: 100vw;
    height: 100vh;
    background-color: #2f3447;

    .loginBlock {
    
    
        width: 400px;
        height: 530px;
        border-radius: 12px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        box-sizing: border-box;
        z-index: 99999;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-content: flex-start;

        h1 {
    
    
            margin-bottom: 30px;
            display: flex;
            align-items: center;
            color: #fff;
            font-size: 38px;
            margin-left: 10px;
            letter-spacing: 5px;
            font-weight: 700;

            img {
    
    
                width: 50px;
                height: 50px;
            }
        }

        p {
    
    
            color: #ccc;
            margin-bottom: 12px;
        }

        >p {
    
    
            color: #eee;
            font-size: 14px;
            letter-spacing: 1px;
            margin-bottom: 50px;
        }

        form {
    
    
            width: 294px;
            height: 40px;
            background-color: rgba(0, 0, 0, 0);

            .el-form-item {
    
    
                .el-form-item__content {
    
    
                    .el-input {
    
    
                        color: #fff;

                        input {
    
    
                            background-color: rgba(0, 0, 0, 0);
                            border: none;
                            border-bottom: 1px solid #979aa3;
                            color: #fff;
                            font-size: 14px;
                            border-radius: 0;
                        }
                    }
                }
            }



            .el-form-item__content {
    
    
                display: flex;
                justify-content: center;

                button {
    
    
                    width: 140px;
                    height: 40px;
                    border-radius: 20px;
                    background-color: #fff;
                    color: #000;
                    border: none;
                }
            }
        }
    }



    // .login {
    
    
    //     width: 100%;
    //     height: 100vh;
    //     position: relative;
    // }

    // .carousel {
    
    
    //     height: 100%;

    //     img {
    
    
    //         position: absolute;
    //         width: 100%;
    //         height: 100%;
    //         object-fit: cover;
    //     }
    // }
}
</style>
  

效果图：