一、項(xiàng)目結(jié)構(gòu)

image.png

二、編寫容器代碼 App.vue

<template>
  <div id="app">
    <el-container>
      <el-header class="el-header" style="background-color: black">
        <home-header></home-header>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <!--引入自定義左側(cè)菜單欄-->
          <left-menu></left-menu>
        </el-aside>
        <el-main>
          <!--引入跳轉(zhuǎn)路由-->
          <router-view ></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
  import HomeHeader from './components/Header'
  import LeftMenu from './components/LeftMenu'

  export default {
    name: "App",
    components: {
      HomeHeader,
      LeftMenu
    }
  }
</script>

<style>
</style>

三、編寫其它組件代碼

Header.vue

<template>
  <div>
        <span style="font-size: 28px; "><font color="#fff" style="vertical-align: middle">測(cè)試</font></span>
  </div>
</template>

<script>
  export default {
//定義調(diào)用名稱
    name: 'HomeHeader'
  }
</script>

LeftMenu.vue

<template>
  <el-menu class="el-menu-vertical-demo"
           background-color="#E9EEF3"
           text-color="black">
          <el-submeu index="1" >
            <template slot="title"><i class="el-icon-message"></i>導(dǎo)航一</template>
            <el-menu-item-group>
              <!--<template slot="title">分組一</template>-->
              <el-menu-item index="1-1">測(cè)試1</el-menu-item>
              <el-menu-item index="1-2">測(cè)試2</el-menu-item>
              <!--<el-menu-item-group title="分組2">-->
              <el-menu-item index="1-3">測(cè)試3</el-menu-item>
              <el-submenu index="1-4">
                <template slot="title">測(cè)試4</template>
                <el-menu-item index="1-4-1">選項(xiàng)4-1</el-menu-item>
              </el-submenu>
            </el-menu-item-group>
          </el-submeu>
        </el-menu>
</template>

<style>
  .el-menu-vertical-demo{
    height: 645px
  }
</style>

<script>
  export default {
    name: 'LeftMenu'
  }

</script>

Main.vue

<template>
    <span style="vertical-align: middle;"><font color="black">測(cè)試</font></span>
</template>

<script>
  export default {
    name: 'TableMain'
  }
</script>

index.vue

import Vue from 'vue'
import Router from 'vue-router'
import Container from '@/page/container'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Container',
      component: Container
    }
  ]
})

四、實(shí)現(xiàn)樣式

image.png

注：
1、加載的過程是index.html->main.js->app.vue->index.js->helloworld.vue
2、element-ui樣式不生效：main.js導(dǎo)入import 'element-ui/lib/theme-chalk/index.css'