一、概述
一般后台页面的顶部导航栏和左侧导航栏一般是固定的,我们可以布局成下面的样式
![](https://i-blog.csdnimg.cn/blog_migrate/d78fa668241f63e21a34fe2ecb2faa8d.png)
二、整体项目布局
因为我们的首页是个公共的组件,点击首页,会员管理,都不会变,所以我们可以放在一个单独文件夹里面。
需要分别对头部,左侧区域,主区域拆分成不同的文件。
创建项目
创建一个全新的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>
修改router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Layout from '@/views/Layout' // 默认加载index.vue
Vue.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>
运行vue项目,访问首页,效果如下:
![](https://i-blog.csdnimg.cn/blog_migrate/383b42acbc7c6904ae18dbe95fc4b832.png)
布局拆分
上面已经实现了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>
views/Layout/components/Appmain.vue
<template>
<div class="main">主区域</div>
</template>
<script>
export default {
name: "AppMain"
}
</script>
<style scoped>
</style>
views/Layout/components/Appnavbar.vue
<template>
<div class="navbar">左侧区域</div>
</template>
<script>
export default {
name: "AppNavbar"
}
</script>
<style scoped>
</style>
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: AppHeader
export 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>
刷新我们的页面,页面还是之前的样式,则我们的抽取没有问题
本文参考链接:
所有评论(0)