<template>
<el-container class="home-container">
<!-- 頭部區域 -->
<el-header>
<div>
<img src="" alt="">
<span>商品信息管理系統</span>
</div>
<el-button type="info">
退出
</el-button>
</el-header>
<el-container>
<!-- 側邊欄區域 -->
<el-aside width="200px">
aside
</el-aside>
<!-- 右邊管理面板 -->
<el-main>
main
</el-main>
</el-container>
</el-container>
</template>
<script>
export default {
name: "NavExample"
}
</script>
<style scoped>
.el-header {
background-color: #373d41;
display: flex;
justify-content: space-between;
align-items: center;
color: #eeeeee;
}
.el-aside {
background-color: #333744;
}
.el-main {
background-color: #EAEDF1;
}
.home-container {
height: 100%;
}
</style>
app.vue 的界面清除掉默認生成的佈局
<template>
<div id="app">
<!-- <img src="./assets/logo.png">-->
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
</style>