手把手教你用element ui搭建后台基础框架

                              手把手教你用element ui搭建后台基础框架

element ui和iview都是vue常用的框架，今天用了一下element ui搭建了一个基础版的后台框架，这里就和大家分享下，首先看一下效果图：

实现步骤：

1、项目使用vue-cli脚手架2搭建，怎么创建脚手架之前博客已经写过，首先引入element-ui,我这里使用较多，就全局引入了，方式如下：

使用如下命令安装

npm i element-ui -S

main.js里面引入

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

2、background.vue

<template>
<transition name="bounce"
  enter-active-class="bounceInLeft"
  leave-active-class="bounceOutRight">
  <div class='backgroundWrapper'>
    <div class="backgroundTop">
        <div class="logoWrapper">
            <div class="logoImg" :style="{backgroundImage:`url(${imageUrl})`}" @click="handleGoHome()">
            </div>
            <div class="logoText">中国联通</div>
        </div>
        <div class="backgroundRight">
            <div class="nickname">spirits</div>
            <div class="quitWrapper" @click="handleQuit()">退出</div>
        </div>
    </div>
    <div class="menuWrapper" ref="menuContent">
        <div class="leftWrapper" :style="{height: leftHeight}">
            <el-row class="tac">
              <el-col :span="24">
                  <el-menu
                  default-active="1"
                  class="el-menu-vertical-demo"
                  @select="handleSelect"
                  background-color="#545c64"
                  text-color="#fff"
                  active-text-color="#ffd04b">
                  <el-submenu index="1">
                      <template slot="title">
                      <i class="el-icon-location"></i>
                      <span>导航一</span>
                      </template>
                      <el-menu-i