Home页面布局设计及框架搭建

最新推荐文章于 2025-01-14 23:32:58 发布

kunnerrionce

最新推荐文章于 2025-01-14 23:32:58 发布

阅读量732

点赞数

分类专栏：项目实训文章标签： elementui vue.js 前端

本文链接：https://blog.youkuaiyun.com/weixin_47673864/article/details/125227081

版权

本文介绍了如何使用Element-UI组件库在Vue.js项目中搭建前端页面布局。主要内容包括利用<el-container>、<el-header>、<el-aside>、<el-main>和<el-footer>构建系统标题、菜单、主体功能区域的布局，并在src/plugins/element.js中引入所需组件，以及在Home.vue文件中实现布局并自定义样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

整个主页分为三大块，最上面是横向的系统标题和操作设置区域，左侧是菜单区域，右侧是主体功能页面显示区域。
完成这样一个首页的布局，我们要用到Elemenet-UI中的下列组件：
<el-container>：外层容器。当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列，否则会水平左右排列。

<el-header>：顶栏容器。

<el-aside>：侧边栏容器。

<el-main>：主要区域容器。

<el-footer>：底栏容器。

大致的页面布局效果：

<el-container>
  <el-header>Header</el-header>
  <el-container>
    <el-aside width="200px">Aside</el-aside>
    <el-main>Main</el-main>
  </el-container>
</el-container>

将需要使用的组件导入到src/plugins/element.js中（Containe