第五课 element后台登录页面-布局篇

一、新建view/login/index.vue文件

二、调整路由router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../views/login/index.vue'

Vue.use(VueRouter)

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

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

然后把浏览器地址栏更换为http://localhost:8888/login

三、login/index.vue布局登录页面

 <div class="login-box">
    <el-form :model="form" ref="form" label-width="60px" class="login-form">
      <h2 class="login-title">vue+Echarts后台管理系统</h2>
      <el-form-item label="用户名">
        <el-input placeholder="请输入用户名" v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input
          placeholder="请输入密码"
          v-model="form.password"
          type="password"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmitLogin">登录</el-button>
      </el-form-item>
    </el-form>
  </div>

四、加入data

data() {
    return {
      form: {
        username: "",
        password:''
      },
    };
  },

五、在app.vue加入重置样式

*{
  margin: 0;
  padding: 0;
}

六、在login/index.vue加入布局样式

.login-form{
  width: 350px;
  background-color: #fff;
  padding: 15px;
  height: 250px;
  border-radius: 20px;
  position: absolute;
  margin-top: -125px;
  margin-left: -175px;
  top:50%;
  left:50%;
}
.login-box{
  position: absolute;
  width: 100%;
  height: 100%;
  background: #ccc;
}
.login-title{
  color: #333;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 30px;
}