vue

<template>
    <div></div>
</template>


<script>





export default{
    name:''
}
</script>





<style scoped>   





</style>

加载 App组件

 

 

路由会先加载/ 然后找到login加载

 

 发现没问题 然后开始写组件

登录页面

<template>
    <div>
        <el-form ref="form" :model="loginForm" class="loginContainer">
            <h3 class="loginTitle">系统登录</h3>
            <el-form-item>
                <el-input type="text" auto-complete="false" v-model="loginForm.username" placeholder="请输入用户名">
                </el-input>
            </el-form-item>
            <el-form-item>
                <el-input type="text" auto-complete="false"  v-model="loginForm.password" placeholder="请输入密码">
                </el-input>
            </el-form-item>
            <el-form-item>
                <el-input class="logincode" type="text" auto-complete="false"  v-model="loginForm.code" placeholder="点击图片更换验证码">
                </el-input>
                <img :src="captchaUrl">
               
            </el-form-item>
             <!-- `checked` 为 true 或 false -->
                <el-checkbox class="loginRemember" v-model="checked">记住我</el-checkbox>
                <el-button type="danger" style="width:100%">登录</el-button>
        </el-form>
    </div>
</template>

<script>

export default{
    name:'login',
    data(){
        return{
            loginForm:{ 
                captchaUrl:"",
                 username:"admin",
                password:"123",
                code:"",
                
            },
            checked:true
          
        }
    }
}
</script>

<style scoped>   
    .loginContainer{
        border-radius: 15px;
        background-clip: padding-box;
        margin: 180px auto;
        width: 350px;
        padding: 15px 35px 15px 35px;
        background: #fff;
        border:1px solid #eaeaea;
        box-shadow:0 0 25px #cac6c6 ;

    }
    .loginTitle{
        margin: 0px auto 40px auto;
        text-align: center;
    }

    .logincode{
        width:250px;
        margin-right: 5px;
    }

    .loginRemember{
        text-align: left;
        margin: 0px 0px 15px 0px;
    }
</style>

 添加校验规则

 

 

<template>
    <div>
        <el-form :rules="rules" ref="loginForm" :model="loginForm" class="loginContainer">
            <h3 class="loginTitle">系统登录</h3>
            <el-form-item prop="username">
                <el-input type="text" auto-complete="false" v-model="loginForm.username" placeholder="请输入用户名">
                </el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input type="text" auto-complete="false"  v-model="loginForm.password" placeholder="请输入密码">
                </el-input>
            </el-form-item>
            <el-form-item prop="code">
                <el-input class="logincode" type="text" auto-complete="false"  v-model="loginForm.code" placeholder="点击图片更换验证码">
                </el-input>
                <img :src="captchaUrl">
               
            </el-form-item>
             <!-- `checked` 为 true 或 false -->
                <el-checkbox class="loginRemember" v-model="checked">记住我</el-checkbox>
                <el-button type="danger" style="width:100%" @click="submitLogin">登录</el-button>
        </el-form>
    </div>
</template>

<script>

export default{
    name:'login',
    data(){
        return{
            loginForm:{ 
                captchaUrl:"",
                 username:"admin",
                password:"123",
                code:"",
                
            },
            checked:true,
            rules:{
                username:[{required:true,message:'请输入用户名',trigger:'blur'}],
                password:[{required:true,message:'请输入密码',trigger:'blur'}],
                code:[{required:true,message:'请输入验证码',trigger:'blur'}]
            }
          
        }
    },
    methods:{
        submitLogin(){
             this.$refs.loginForm.validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
           this.$message({
          showClose: true,
          message: '错了哦，这是一条错误消息',
          type: 'error'
        });
            return false;
          }
        });
        }
    }
}
</script>

<style scoped>   
    .loginContainer{
        border-radius: 15px;
        background-clip: padding-box;
        margin: 180px auto;
        width: 350px;
        padding: 15px 35px 15px 35px;
        background: #fff;
        border:1px solid #eaeaea;
        box-shadow:0 0 25px #cac6c6 ;

    }
    .loginTitle{
        margin: 0px auto 40px auto;
        text-align: center;
    }

    .logincode{
        width:250px;
        margin-right: 5px;
    }

    .loginRemember{
        text-align: left;
        margin: 0px 0px 15px 0px;
    }
</style>