往期
从0到1完成一个Vue后台管理项目（二、使用element-ui）
从0到1完成一个Vue后台管理项目（三、使用SCSS/LESS，安装图标库）
从0到1完成一个Vue后台管理项目（四、引入axios、配置路由）
从0到1完成一个Vue后台管理项目（五、登录页（表单校验的使用和封装））
从0到1完成一个Vue后台管理项目（五、登录页，mock，token，axios封装）
建立common文件夹
components下建立common文件夹
建立Header、Footer、Menu文件，并初始化一下
Home改造
代码放在这里
<template>
<div class="home">
<Header />
<el-container class="content">
<Menu />
<el-container>
<el-main>Main</el-main>
<el-footer>
<Footer />
</el-footer>
</el-container>
</el-container>
</div>
</template>
<script>
import Header from './common/Header.vue'
import Footer from './common/Footer.vue'
import Menu from './common/Menu.vue'
export default {
components: {
Header,
Footer,
Menu
},
data() {
return {}
}
}
</script>
<style lang="scss">
.home {
width: 100%;
height: 100%;
.content {
position: absolute;
width: 100%;
top: 60px;
bottom: 0;
}
}
</style>
Header
Header样式调整
Footer这里我们用card就可以
然后我们就得到了一个页面的基础布局
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/79680.html
