1、注册组件
2、引用组件(import login from './components/login')
3、声明组件(components:{'v-hello': hello} )
4、挂载组件(<v-hello></v-hello>)
以下myself、login、HelloWord、menu等都为另外的vue文件,具体见vue代码
<template>
<div id='add'>
<el-container style="height: 600px; border: 1px solid #eee">
<el-aside width="240px">
<v-menu></v-menu>
</el-aside>
<el-container>
<el-breadcrumb style="text-align: right; font-size: 32px">
<v-hello></v-hello>
</el-breadcrumb>
<el-header style="text-align: right; font-size: 20px">
<v-myself></v-myself>
</el-header>
<el-main>
<!-- <v-login></v-login> -->
<!-- <v-ac></!-->
<router-view/>
</el-main>
<el-footer>
<v-foot></v-foot>
</el-footer>
</el-container>
</el-container>
</div>
</template>
<script>
/*
1、注册组件
2、引用组件(import login from './components/login')
3、声明组件(components:{'v-hello': hello} )
4、挂载组件(<v-hello></v-hello>)
*/
import myself from './myself'
import login from './login'
import hello from './HelloWorld'
import menu from './menu'
import foot from './foot'
// import ac from './ac'
export default {
name: 'Add',
data(){
return{
message: ''
}
},
methods:{
},
components:{
'v-myself':myself,
'v-login':login,
'v-hello': hello,
'v-menu':menu,
'v-foot':foot
// 'v-ac':ac
}
}
</script>
<style>
.el-breadcrumb{
background-color: rgb(169, 181, 197);
background-image: url('../assets/ni.jpg');
color: #333;
font-size: 20px;
font-family: 'STKaiti';
}
.el-header, .el-footer {
background-color: #B3C0D1;
background-image: url('../assets/ai.jpg');
color: #333;
text-align: right;
line-height: 60px;
}
.el-aside {
background-color: #D3DCE6;
background-image: url('../assets/yi.jpg');
color: #333;
text-align: center;
}
.el-main {
background-color: white;
color: #333;
text-align: center;
line-height: 50px;
}
body > .el-container {
margin-bottom: 40px;
}
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
line-height: 260px;
}
.el-container:nth-child(7) .el-aside {
line-height: 320px;
}
</style>