vue+elementui简约登录

一.导入js，css

        
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
        
        <script src="https://unpkg.com/vue/dist/vue.js">script>
        
        <script src="https://unpkg.com/element-ui/lib/index.js">script>
        
        <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js">script>

二.主题内容

        <div class="store-login" id="app">
            
            <div class="bg-login">
                <li v-for="bgimg in bgImages">
                    <img :src="bgimg">
                li>
                
            div>
            <div class="login-s">
                
                <el-form :model="loginForm" ref="LoginFormRef" :rules="loginFormRules" label-width="0px" class="login_form">
                    
                    <el-form-item prop="username">
                        <el-input v-model="loginForm.username" prefix-icon="iconfont icon-user">el-input>
                    el-form-item>
                    
                    <el-form-item prop="password">
                        <el-input type="password" v-model="loginForm.password" prefix-icon="iconfont icon-3702mima">el-input>
                    el-form-item>
                    
                    <el-form-item class="btns">
                        <el-button type="primary" @click="login">登录el-button>
                        <el-button type="info" @click="resetLoginForm">重置el-button>
                    el-form-item>
                el-form>
            div>
        div>

三.javascript代码

四.代码样式

五.效果图

 预览地址：https://li_shang_shan.gitee.io/vue-element-ui-login/

个人学习，内容简略