一、概述

一般后台页面的顶部导航栏和左侧导航栏一般是固定的，我们可以布局成下面的样式

二、整体项目布局

因为我们的首页是个公共的组件，点击首页，会员管理，都不会变，所以我们可以放在一个单独文件夹里面。

需要分别对头部，左侧区域，主区域拆分成不同的文件。

创建项目

创建一个全新的ElementUI 项目，请参考链接：

https://www.cnblogs.com/xiao987334176/p/14187889.html

在src目录下，创建views文件夹，在里面再创建Layout文件夹，最后创建index.vue

最终src目录结构如下：

./
├── App.vue
├── assets
│   └── logo.png
├── components
│   └── HelloWorld.vue
├── main.js
├── router
│   └── index.js
└── views└── Layout└── index.vue

修改views/Layout/index.vue，完整内容如下：

<template><div><div class="header">头部</div><div class="navbar">左侧区域</div><div class="main">主区域</div></div>
</template><style scoped>/* 头部样式 */.header {position: absolute;line-height: 50px;top: 0px;left: 0px;right: 0px;background-color: #2d3a4b;}/* 左侧样式 */.navbar {position: absolute;width: 200px;top: 50px;  /* 距离上面50像素 */left: 0px;bottom: 0px;overflow-y: auto; /* 当内容过多时y轴出现滚动条 */background-color: #545c64;}/* 主区域 */.main {position: absolute;top: 50px;left: 200px;bottom: 0px;right: 0px;  /* 距离右边0像素 */padding: 10px;overflow-y: auto; /* 当内容过多时y轴出现滚动条 *//* background-color: red; */}
</style>

View Code

修改router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Layout from '@/views/Layout'  // 默认加载index.vueVue.use(Router)export default new Router({mode: 'history',  //去掉url中的#routes: [{path: '/',name: 'layout',  // 路由名称component: Layout  // 组件对象}]
})

修改App.vue，注释多余的代码

<template><div id="app">
<!--    <img src="./assets/logo.png">--><router-view/></div>
</template><script>
export default {name: 'App'
}
</script><style>
/*#app {*/
/*  font-family: 'Avenir', Helvetica, Arial, sans-serif;*/
/*  -webkit-font-smoothing: antialiased;*/
/*  -moz-osx-font-smoothing: grayscale;*/
/*  text-align: center;*/
/*  color: #2c3e50;*/
/*  margin-top: 60px;*/
/*}*/
</style>

View Code

运行vue项目，访问首页，效果如下：

布局拆分

上面已经实现了3个区域的布局，现在需要将3个区域拆分成不同的vue文件，方便后续的维护。

在src/views/Layout目录下，创建文件夹components，并在此文件夹创建3个文件AppHeader.vue，Appmain.vue，Appnavbar.vue

最终，src目录结构如下：

./
├── App.vue
├── assets
│   └── logo.png
├── components
│   └── HelloWorld.vue
├── main.js
├── router
│   └── index.js
└── views└── Layout├── components│   ├── AppHeader.vue│   ├── Appmain.vue│   └── Appnavbar.vue└── index.vue

views/Layout/components/AppHeader.vue

<template><div class="header">头部</div>
</template><script>export default {name: "AppHeader"}
</script><style scoped></style>

View Code

views/Layout/components/Appmain.vue

<template><div class="main">主区域</div>
</template><script>export default {name: "AppMain"}
</script><style scoped></style>

View Code

views/Layout/components/Appnavbar.vue

<template><div class="navbar">左侧区域</div>
</template><script>export default {name: "AppNavbar"}
</script><style scoped></style>

View Code

views/Layout/index.vue

<template><div><app-header></app-header><app-navbar></app-navbar><app-main></app-main></div>
</template><script>import AppHeader from "./components/AppHeader"import AppNavbar from "./components/AppNavbar"import AppMain from "./components/AppMain"// 导入子组件，缩写格式 AppHeader: AppHeaderexport default {components: { AppHeader, AppNavbar, AppMain }  // 有s};</script><style scoped>/* 头部样式 */.header {position: absolute;line-height: 50px;top: 0px;left: 0px;right: 0px;background-color: #2d3a4b;}/* 左侧样式 */.navbar {position: absolute;width: 200px;top: 50px;  /* 距离上面50像素 */left: 0px;bottom: 0px;overflow-y: auto; /* 当内容过多时y轴出现滚动条 */background-color: #545c64;}/* 主区域 */.main {position: absolute;top: 50px;left: 200px;bottom: 0px;right: 0px;  /* 距离右边0像素 */padding: 10px;overflow-y: auto; /* 当内容过多时y轴出现滚动条 *//* background-color: red; */}
</style>

View Code

刷新我们的页面，页面还是之前的样式，则我们的抽取没有问题

本文参考链接：

https://www.cnblogs.com/zouzou-busy/p/13080665.html

ElementUI 整体页面布局相关推荐

xml信息管理系统_WPF信息管理系统项目实战教程二：使用XAML实现页面布局
首页面布局设计 XAML(Extensible Application Markup Language),可扩展应用程序标记语言的使用使得C#桌面应用程序开发前后端实现真正分离.前端人员可使用该标记语 ...
element-UI栅格系统缩放，导致页面布局效果bug? 叠加？错位？
这里以此代码片段为例说明一则bug,请bug对号入座.(bug截图省略) 页面的栅格缩放,导致页面布局发生叠加错位? 一.坑1 · 引言: (先来一则bug代码) <el-card v-for= ...
html5页面整体布局,HTML5页面布局网页的基本结构
这篇HTML5页面布局我们来学习组成HTML5网页的基本结构都包含了哪些内容,首先先来看下源代码. 欢迎关注头条号/自学编程 hello world 以上就是一个HTML5网页的最基本结构. 下面我们 ...
div、Flex、element-ui-layout页面布局
div.Flex.element-ui-layout页面布局一.div页面布局 1.页面布局标签属性 2.定位属性 3.盒子模型 (1)标准盒模型 (2)怪异盒模型二.Flex页面布局 1.基本概 ...
SharePoint 2013 入门教程之创建页面布局及页面
原文:SharePoint 2013 入门教程之创建页面布局及页面在SharePoint的使用过程中,页面布局和页面时很重要的两个概念,主要用于数据个性化展示,下面,我们简单介绍一下SharePoi ...
vs2005 + ASP.NET 页面布局应注意问题及方法步骤
假如是一个人负责前后台,而又对后台开发比较在行,可以从后到前,也就是-- 1.用vs开发业务功能,注重"尽量不要"为服务器控件设置任何样式(字体.颜色.长宽.坐标.边框.间隔.空白 ...
Abiword页面布局
Abiword页面布局 AP_Win32FrameImpl::_DocumentWndProc 文档窗口过程函数在WM_SIZE消息中设置FV_View对象的整体尺寸,跟窗体的:设备单位转换成:布 ...
关于页面布局间距使用的经验之谈
在页面布局的时候遇到一个问题在此记录. 有如下布局需求.页面上大多数都是这样的,一块一块从上到下排列. 块与块之间的间距需要固定由谁来负责.例如第一个块和第二个块之间的间距,就需要第二个块的margi ...
[html] 页面布局时你使用最多的标签是什么？div吗？在什么情况下会使用到div？
[html] 页面布局时你使用最多的标签是什么?div吗?在什么情况下会使用到div? 页面的的整体布局使用<header> <main> <aside> < ...

ElementUI 整体页面布局

一、概述

二、整体项目布局

创建项目

布局拆分

ElementUI 整体页面布局相关推荐

最新文章

热门文章