.login_box{width: 450px;height: 300px;background-color: #fff;border-radius: 3px;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);
}

9. 头像样式

    .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;img {width: 100%;height: 100%;border-radius: 50%;background-color: #eee;}}

10. 登录表单：使用element-ui ;由于该插件设置为按需导入，需要先在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)

            <!-- 登录表单 --><el-form label-width="0px" class="login_form"><!-- 用户名 --><el-form-item><el-input></el-input></el-form-item><!-- 密码 --><el-form-item><el-input type="password"></el-input></el-form-item><!-- 按钮区域 --><el-form-item class="btns"><el-button type="primary">登录</el-button><el-button type="info">重置</el-button></el-form-item></el-form>

.login_form {position: absolute;bottom: 0;width: 100%;padding: 0 20px;box-sizing: border-box;
}.btns {display: flex;justify-content: flex-end;
}

11. 带icon的输入框: 使用第三方矢量图标库：iconfont-阿里巴巴矢量图标库

                <!-- 用户名 --><el-form-item><el-input prefix-icon="iconfont icon-user"></el-input></el-form-item><!-- 密码 --><el-form-item><el-input prefix-icon="iconfont icon-3702mima"></el-input></el-form-item>

12. 登录组件表单的数据绑定Element - The world's most popular Vue UI framework -》典型表单

13. 登录表单组件的数据验证Element - The world's most popular Vue UI framework -》表单验证

14. 表单的重置：在<el-form>中添加ref属性以获取表单实例对象，为重置按钮绑定点击事件

From Methods -> resetFields

15. 登录前的预验证 From Methods -> validate

        // 登录login () {this.$refs.loginFormRef.validate(async (valid) => {if (!valid) returnconst { data } = await this.$http.post('login', this.loginForm) // data()中的loginFormconsole.log(data)if (data.meta.status !== 200) return console.log('登录失败')console.log('登录成功')})

16. 登录组件的弹窗配置element-ui -> Message 消息提示

if (data.meta.status !== 200) return this.$message.error('登录失败')
this.$message.success('登录成功')

const {data: res } = await this.$http.post('login', this.loginForm)
if (res.meta.status !== 200)return this.$message.error('登录失败！')
// 提示登录成功
this.$message.success('登录成功！')
// 把登录成功的token保存到sessionStorage
window.sessionStorage.setItem('token', res.data.token)
// 使用编程式导航，跳转到后台主页
this.$router.push('/home')

// 为路由对象，添加 beforeEach 导航守卫
router.beforeEach((to, from, next) => {// 如果用户访问的登录页，直接放行if (to.path === '/login') return next()// 从 sessionStorage 中获取到 保存的 token 值const tokenStr = window.sessionStorage.getItem('token')// 没有token，强制跳转到登录页if (!tokenStr) return next('/login')next()
})