这一篇我们将通过ElementUI组件来详细介绍如何设计登录页面样式和内容，主要包含三个步骤：

1. 设置整个背景的颜色
2. 绘制登录区域
3. 在登录区域添加登录表单

知识点：

1. 背景色如何撑满整个屏幕，通过设置html body标签高度100%
2. 如何在屏幕中央显示一块区域
3. box-sizing: border-box的使用
4. element-ui表单的使用

一、添加背景颜色

Login.vue

实现效果如下，发现背景颜色并不能撑满整个屏幕

这是因为页面标签元素的高度没有设置。html,body,app,login等相关元素没有设置高度。

在assets目录下新建css目录，并在css目录下新建一个全局的样式文件global.css

在该文件中设置屏幕的相关标签高度

html,body, #app{    height: 100%;    margin: 0;    padding: 0;}

并在入库文件main.js中导入该样式文件 import './assets/css/global.css'

import Vue from 'vue'import App from './App.vue'import router from './router'import store from './store'import './plugins/element.js'import './assets/css/global'Vue.config.productionTip = falsenew Vue({  router,  store,  render: h => h(App)}).$mount('#app')

最后在设置登录页面的高度Login.vue

此时再启动页面发现背景颜色已经撑满整个屏幕，如下：

二、添加登录区域

Login.vue 添加一个login_box，设置白色背景并居于屏幕中央显示

设置完成之后，打开效果如下：

三、登录区域中添加登录表单

进入element-ui官网：https://element.eleme.cn/#/zh-CN/component/form 找到form表单

el-form表示一个表单的根节点 label-width表示表单文本框前面文字的宽度

el-form-item表示每一个表单项

login.vue

查看效果显示如下：

这样一个简单的登录页面就设计好了。下一篇我们继续介绍如何实现登录功能业务逻辑。