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

本文主要是介绍手把手教你用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-menudefault-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

这篇关于手把手教你用element ui搭建后台基础框架的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---