Vue3+Element-Plus 登录组件布局实现六

1. 登录组件布局

 1.1进入到Login.vue，添加一个类选择器，添加一个背景颜色 

1.2 保存，看一下效果，发现运行不起来，提示需要安装 less-loader 。

默认cli 工具创建的并没有去安装less-loader.如果我们要去使用less相关的语法，就需要先配置好less相关的loader才行。

 1.3 安装配置less-loader。打开可视化UI 面板，选择依赖-安装依赖

 1.4 less-loader 应安装在开发依赖中，所以找到选择开发依赖,搜索less-loader

 1.5 less-loader 安装完成后，还要安装一个依赖项 less，同样安装到开发依赖中.为啥还要安装less,因为less-loader是依赖于less这个包的。

 1.6 安装完成后，重新编译。打开开初化UI，找到任务，点击停止后重新运行，启动app 

1.7 背景颜色已经生效了，但是并没有占满屏幕。如果想要让背景颜色填充满整个屏幕的话，需要给页面上其他元素，添加相关的样式。

 1.8 是什么没有导致占满全屏呢，可以检查一下元素。

• 首先可以看到，html不是占全屏的。所以就需要让html高度占满全屏
• body 也不是占满全屏的，也需要让body占满全屏

 1.9 接下来写样式。如果要写全局样式，可以在assets里面新建一个css文件夹，专门放处理全局样式表的样式文件。然后可以在里面定义相关的标签

2.0 全局样式表写好后，要引用才能生效。所以就需要在入口文件main.js中导入该样式表

 2.1 接下来，鼠标放到html和body上面，样式已经占满全屏了

2.2 只是body里面的子div，并没有占满全屏。

2.3 那接下来，只需要再给 login_container 元素加一个高度为100就可以了

 

我设置了100%不生效，后面我改成了vh

2.4 刷新页面效果，背景颜色就占满全屏了。

2.5 当背景色设置完成后，紧接着去绘制一下登录的盒子。就是白色的盒子

2.6 白色盒子可以在 login_container 元素里面绘制

2.7 切换到页面可以看到白色的盒子已经出来了，但是还需要让它位移到中间。继续在login_box加样式

2.8 首先要加一个绝对定位，这样才能够让盒子进行位移

2.9 这样左则和顶部各偏移了50% 

3.0 但是并没有在页面正中间，还需要加一个样式

3.1 这样子，白色拿子就放在页面正中间 了

 以上出自于：【黑马程序员】前端开发之Vue项目实战_Element-UI【配套源码+笔记】_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1x64y1S7S7?p=1