1 导入
import Header from './common/Header.vue'
import Footer from './common/Footer.vue'
import Menu from './common/Menu.vue'
2 配置
export default {
components: {
Header,
Footer,
Menu},
data() {
return {
};
},
}
显示
<template>
<div class="home">
<Header/>
<Footer/>
<Menu/>
</div>
</template>
链接: linkhttps://element.eleme.cn/#/zh-CN
<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>
<template>
<div class="header">
<el-header>
<div class="title">通用管理系统</div>
</el-header>
<div>{{ name }}</div>
</div>
</template>
<script>
import { getToken } from '@/utils/setToken.js'
export default {
data() {
return {
name: ''
}
},
created() {
this.name = getToken('username')
}
}
</script>
<style lang="scss" scoped>
.header {
.el-header {
background:#2578b5;
color:#fff;
line-height: 60px;
display: flex;
justify-content: space-between;
.title{
width: 200px;
font-size: 24px;
}
}
}
</style>
引入