手把手教你用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