vue组件知识小结

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>