vue实现登陆单页面

一实现页面的布局

1. 首先在components里建一个login.vue

<template>

    <div class=login_container>

         登陆组件

    </div>

</template>

<script>

    export default {

    }

</script>

<style>

</style>

登陆组件

2. 路由的设置 router下的index.js

import Vue from 'vue'

import VueRouter from 'vue-router'

// 导入login路劲

import login from '@/components/login'

Vue.use(VueRouter)

export default new VueRouter({

       /* 设置路由 */

    routes:[

        { path: '/',redirect:'/login'},

        { path: '/login',component: login}

    ]

})

路由的设置

3. App.vue

<template>

    <div id="app">

                // *********

        <router-view></router-view>

    </div>

</template>

<script>

    export default {

                name: 'app',

        components:{

        }

    }

</script>

<style>

</style>

App.vue设置

4. 整体样式

在assets新建一个global.css

html,body,#app{

    height: 100%;

    margin: 0;

    padding: 0;

}

css文件

在main.js导入

import './assets/css/global.css'

导入css

5. 修改login.vue

<template>

    <div class=login_container>

         登陆组件

         <div class="login_box"></div>

    </div>

</template>

<script>

    export default {

    }

</script>

<style>

.login_container{

    height: 100%;

    background-color: #2b4b6b;

}

.login_box{

    width: 450px;

    height: 300px;

    background-color: #fff;

    border-radius: 3px;

    position: absolute;

    left: 50%;

    top:50%;

    transform: translate(-50%,-50%);

}

</style>

二页面绘制头像

<template>

    <div class=login_container>

         登陆组件

         <div class="login_box">

             <!-- 头像 -->

             <div class="avatar_box">

                 <img src="../assets/logo.png" alt="">

             </div>

         </div>

    </div>

</template>

<script>

    export default {

    }

</script>

<style>

.login_container{

    height: 100%;

    background-color: #2b4b6b;

}

.login_box{

    width: 450px;

    height: 300px;

    background-color: #fff;

    border-radius: 3px;

    position: absolute;

    left: 50%;

    top:50%;

    transform: translate(-50%,-50%);

}

/* 头像样式开始 */

.avatar_box{

        height: 130px;

        width: 130px;

        border: 1px solid #eee;

        border-radius: 50%;

        padding: 10px;

        box-shadow: 0 0 10px #ddd;

        position: absolute;

        left:50%;

        transform: translate(-50%,-50%);

        background-color: #fff;

    }

.avatar_box img{

            width: 100%;

            height: 100%;

            border-radius: 50%;

            background-color: #eee;

        }

/* 头像样式结束 */

</style>

头像样式

三绘制登陆表单

其实要实现上面的样子我们就用到了 element-ui 组件

有Button Input Form FormItem 组件

我们是按需要导入

我们在plugins文件下的element.js

import Vue from 'vue'

import { Button } from 'element-ui'

import { Input } from 'element-ui'

import { Form, FormItem } from 'element-ui'

Vue.use(Button)

Vue.use(Input)

Vue.use(Form)

Vue.use(FormItem)

element.js

在回到 login.vue

<template>

    <div class=login_container>

         登陆组件

         <div class="login_box">

             <!-- 头像 -->

             <div class="avatar_box">

                 <img src="../assets/logo.png" alt="">

             </div>

             <!-- 表单 -->

             <el-form class="login_form">

                 <!-- 用户名 -->

               <el-form-item>

                 <el-input></el-input>

               </el-form-item>

               <!-- 密码 -->

               <el-form-item>

                 <el-input></el-input>

               </el-form-item>

               <!-- 按钮 -->

               <el-form-item class="btns">

                   <el-button type="primary">登陆</el-button>

               </el-form-item>

            </el-form>

         </div>

    </div>

</template>

<script>

    export default {

    }

</script>

<style>

.login_container{

    height: 100%;

    background-color: #2b4b6b;

}

.login_box{

    width: 450px;

    height: 300px;

    background-color: #fff;

    border-radius: 3px;

    position: absolute;

    left: 50%;

    top:50%;

    transform: translate(-50%,-50%);

}

/* 头像样式开始 */

.avatar_box{

        height: 130px;

        width: 130px;

        border: 1px solid #eee;

        border-radius: 50%;

        padding: 10px;

        box-shadow: 0 0 10px #ddd;

        position: absolute;

        left:50%;

        transform: translate(-50%,-50%);

        background-color: #fff;

    }

.avatar_box img{

            width: 100%;

            height: 100%;

            border-radius: 50%;

            background-color: #eee;

        }

/* 头像样式结束 */

.btns{

/*     position: absolute;

    right: 0; */

    display: flex;

    justify-content: flex-end;

    }

.login_form{

    position: absolute;

    bottom: 0;

    /* 占满全屏 */

    width: 100%;

    /* 边距会超出 用后面那句 box-sizing: border-box; */

    padding: 0 20px;

    box-sizing: border-box;

}

</style>

表单 element 有样式哟

巴特西

vue实现登陆单页面

一实现页面的布局

1. 首先在components里建一个login.vue

2. 路由的设置 router下的index.js

3. App.vue

4. 整体样式

5. 修改login.vue

二页面绘制头像

三绘制登陆表单

最新文章

热门文章

巴特西

vue实现登陆单页面

一 实现页面的布局

1. 首先在components里建一个login.vue

2. 路由的设置 router下的index.js

3. App.vue

4. 整体样式

5. 修改login.vue

二 页面绘制头像

三 绘制登陆表单

最新文章

热门文章

一实现页面的布局

二页面绘制头像

三绘制登陆表单