基于Vue+element设计 经典网站后台管理界面

<template>
  <el-container>
    <el-header
      height=""
    >
      <el-menu :default-active="activeIndex"
               class="el-menu-demo"
               mode="horizontal"
               @select="handleSelect"
               text-color="white"
               background-color="black">
        <el-menu-item index="1">
          <a href="/" target="_blank">首页a>
        el-menu-item>

        <el-menu-item index="2">
          <a href=" " target="_blank">订单管理a>
        el-menu-item>

        <el-submenu index="3">
          <template slot="title">个人中心template>
          <el-menu-item index="2-1">个人资料el-menu-item>
          <el-menu-item index="2-2">退出登录el-menu-item>
        el-submenu>

        <el-menu-item index="4">
          <span style="margin-right: 15px;">有勇气的牛排span>
          <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png">el-avatar>
        el-menu-item>

      el-menu>
      <div class="line">div>

    el-header>
    <el-container>
      <el-aside width="">
        <el-row class="tac">
          <el-col :span="24">
            <el-menu
              default-active="2"
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose">

              <el-menu-item index="1">
                <i class="el-icon-setting">i>
                <span slot="title">
                     <router-link to="/user_account">账户设置router-link>
                  span>
              el-menu-item>

              <el-menu-item index="2">
                <i class="el-icon-menu">i>
                <span slot="title">
                    <router-link to="/user_profile">个人资料router-link>
                  span>
              el-menu-item>

              <el-menu-item index="3">
                <i class="el-icon-menu">i>
                <span slot="title">
                    <router-link to="/user_article_analysis">数据概览router-link>
                  span>
              el-menu-item>

              <el-menu-item index="3">
                <i class="el-icon-menu">i>
                <span slot="title">
                    <router-link to="/user_setting">博客设置router-link>
                  span>
              el-menu-item>

            el-menu>
          el-col>
        el-row>

      el-aside>
      <el-main>
        <router-view/>
      el-main>

    el-container>
    <el-container
      width="">
      <el-footer>Footerel-footer>

    el-container>
  el-container>
template>

<script>
  export default {
    name: 'App',
  }
script>

<style>


  /* 框架 */
  .el-header {
    background-color: black;
    color: white;
    text-align: center;
    /*line-height: 60px;*/
  }

  .el-footer {
    background-color: black;
    color: white;
    text-align: center;
    line-height: 60px;
  }

  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }

  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }

  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>

预览