Vue项目构造页面布局

这些都是我根据B站winWeb前端分享的个人空间_哔哩哔哩_Bilibili 的视频再自己动手进行实践的

Element plus 提供了很多页面的布局，Element plus 为了方便开发人员使用，直接提供了布局容器组件，可以很方便的直接生成上述的布局栏。其中主要包含5中标签，并使用它们来构造页面布局。

<el-container>：是所有容器的外层容器，此标签也可以互相嵌套构成更多布局。并且当子元素中包含<el-header>或<el-footer>时，内部子元素会垂直排列。针对其他元素，则会水平排列。
<el-header>：顶部栏容器。
<el-aside>：侧边栏容器。
<el-main>：内容区域容器。
<el-footer>：底部栏容器。

使用Element plus提供的布局

首先新建项目的主页Vue，并在其中嵌套入自己想要的布局方式即可，下面是我尝试使用的布局

<template><el-container><el-header><h3>I am Header </h3></el-header><el-container><el-aside><h3>I am aside</h3></el-aside><el-container><el-main>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Id repellat vel est cum perspiciatis iste maxime veritatis placeat ea ratione officiis cumque rem molestias debitis in quod beatae ipsum mollitia consequuntur, voluptatibus enim! Rerum molestias eveniet animi, eius ea facere velit blanditiis sapiente cupiditate expedita quis, eligendi porro sequi perspiciatis omnis modi obcaecati hic sint voluptatum. Reiciendis distinctio perspiciatis maxime temporibus quasi libero dolore minus? Ipsum in reprehenderit consequuntur magni, quo nisi ratione voluptate pariatur! Accusantium corrupti eaque fugiat labore inventore est quod id, in exercitationem consequuntur, ipsam aliquam, odit nobis non commodi odio itaque voluptatum hic ipsum? Incidunt, maiores!</el-main><el-footer><h3>I am footer</h3></el-footer></el-container></el-container></el-container>
</template><style scoped>
.el-header{background-color: yellow;
}
.el-aside{background-color: green;
}
.el-main{background-color: white;
}
.el-footer{background-color: gray;
}
</style>

呈现的效果如图所示

这样就能完成布局，后续我们可以通过自写的组件嵌套进相应的模块中，并使用vue的vue-router模块实现路由配置，实现项目的组件化

Vue项目构造页面布局相关推荐

解决：vue项目的页面刷新之 title被重置问题
如何解决:vue项目的页面刷新之 title被重置问题? 需求场景描述:(以title名为"个人中心"页面为例) 用户初次访问进入"个人中心"页,浏览器显示的页 ...
Vue项目在页面添加水印功能
Vue项目在页面添加水印功能创建watermark.js文件 let watermark = {}let setWatermark = (str) => {let id = '1.234523 ...
vue 项目中页面打印实现（去除页眉页脚）
vue 项目中页面打印实现参考文章: 13 Paged media 项目描述: 背景:框架vue.组件 element-ui,已有一个在用的后台管理系统需求:现需在列表页面添加按钮-----打印协 ...
解决：vue项目中页面顶部和左边出现空白
vue项目中页面顶部和左边出现空白本次问题是调试login.vue页面时出现的.发现页面顶部和左边出现不应该出现的空白后,打开f12,查看.发现左边的空白是body的margin.于是在本页面css ...
vue项目将页面生成pdf
项目场景: vue项目运行在移动端(企业微信聊天栏工具.企业微信浏览器.微信浏览器.外部浏览器),PC端(微信浏览器.其他厂商浏览器),利用html2canvas将页面生成图片文件,并采用jspdf将 ...
前端Vue项目调用页面web3.js:连接metaMask钱包,(查询钱包ETH余额,查询代币余额,ETH转账,代币转账,代币授权,查询授权数量,计算价格)等功能
这里分享下相关文档 1.web3.js中文文档 https://learnblockchain.cn/docs/web3.js/getting-started.html 2.metamask官方文档: ...
Vue项目提高页面加载速度的方法
1.路由懒加载路由懒加载简单来说就是访问到当前页面才会加载相关资源,提高页面加载速度. { path: '/login', name: 'login', component: resolce ...
vue项目H5页面在苹果手机点击输入框输入内容时页面自动放大
遇到的问题用vue写H5页面时,iPhone手机点击input搜索框,输入内容时,页面会自动放大. 解决方法在public文件夹下找到html文件,打开后加上user-scalable=no 就行 ...
vue项目中页面响应式布局设计方案
针对全屏页面开发,兼容 19201080,以及 1366768 js设置原型属性$screen: 获取当前是什么屏幕 isS: 1366定义的最小屏幕 isM: 1366-1600的中间屏幕 isB: ...

Vue项目构造页面布局

Vue项目构造页面布局相关推荐

最新文章

热门文章