登陆页面element-ui实现

创建分支

git checkout -b login

查看分支

git branch

 

打开开vue ui

运行server

运行app

修改

<template>
  <div id="app">
    app 根组件
  </div>
</template>

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

<style></style>

删掉components下helloworld.vue

 

-----------------------

具体代码：main.js

 

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './plugins/element.js'
// import Login from './components/Login'
Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

App.vue

<template>
  <div id="app">
     <router-view></router-view>
  </div>
</template>

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

<style></style>

 

components/Login.vue

<template>
    <div>
        登录组件
    </div>
</template>

<script>
export default {}
</script>

<style lang="less" scoped>
</style>

router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../components/Login.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', redirect: '/login' },
  { path: '/login', component: Login }
]

const router = new VueRouter({
  routes
})

export default router

安装 less  less-loader

-------------

居中头像 box

<template>
    <div class="login_container">
    <div class="login_box">
        <div class="avator_box">
            <img src="../assets/logo.png" alt="">
        </div>
    </div>
    </div>
</template>

<script>
export default {}
</script>

<style lang="less" scoped>
.login_container{
    background-color: #2b4b6b;
    height: 100%;
}
.login_box{
    width: 450px;
    height: 300px;
    background-color: #fff;
    border-radius: 3px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
.avator_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%);
    img{
        height: 100%;
        width: 100%;
        border-radius: 50%;
        background-color: #eee;
    }
}
</style>

 

-------------

引入element ui的form

 

element.js

import Vue from 'vue'
import { Button, Form, FormItem, Input } from 'element-ui'

Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)

login.vue

<template>
  <div class="login_container">
    <div class="login_box">
      <!-- 头像 -->
      <div class="avator_box">
        <img src="../assets/logo.png" alt />
      </div>
      <!-- 输入表单 -->
      <el-form label-width="0" class="login_form">
        <!-- name -->
        <el-form-item>
          <el-input></el-input>
        </el-form-item>
        <!-- password -->
        <el-form-item>
          <el-input></el-input>
        </el-form-item>
        <!--button -->
        <el-form-item class="btns">
          <el-button type="primary">登录</el-button>
          <el-button type="info">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {}
</script>

<style lang="less" scoped>
.login_container {
  background-color: #2b4b6b;
  height: 100%;
}
.login_box {
  width: 450px;
  height: 300px;
  background-color: #fff;
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.avator_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%);
  img {
    height: 100%;
    width: 100%;
    border-radius: 50%;
    background-color: #eee;
  }
}
.login_form{
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}
.btns{
    display: flex;
    justify-content: flex-end;
}
</style>