手把手教你用element ui搭建后台基础框架
手把手教你用element ui搭建后台基础框架
element ui和iview都是vue常用的框架，今天用了一下element ui搭建了一个基础版的后台框架，这里就和大家分享下，首先看一下效果图：
实现步骤：
1、项目使用vue-cli脚手架2搭建，怎么创建脚手架之前博客已经写过，首先引入element-ui,我这里使用较多，就全局引入了，方式如下：
使用如下命令安装
npm i element-ui -Smain.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-item index="1">选项1</el-menu-item>
<el-menu-item index="2">选项2</el-menu-item>
<el-menu-item index="3">选项3</el-menu-item>
<el-menu-item index="4">选项4</el-menu-item>
</el-submenu>
<el-submenu index="2">
<template slot="title">
<i class="el-icon-location"></i>
<span>导航二</span>
</template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
<el-menu-item index="2-3">选项3</el-menu-item>
<el-menu-item index="2-4">选项4</el-menu-item>
</el-submenu>
<el-submenu index="3">
<template slot="title">
<i class="el-icon-location"></i>
<span>导航三</span>
</template>
<el-menu-item index="3-1">选项1</el-menu-item>
<el-menu-item index="3-2">选项2</el-menu-item>
<el-menu-item index="3-3">选项3</el-menu-item>
<el-menu-item index="3-4">选项4</el-menu-item>
</el-submenu>
</el-menu>
</el-col>
</el-row>
</div>
<div class="contentWrapper">
<div class="topWrapper">
<el-tabs v-model="editableTabsValue" type="card" editable @edit="handleTabsEdit">
<el-tab-pane
:key="item.name"
v-for="item in editableTabs"
:label="item.title"
:name="item.name">
<div class="caseWrapper">
<div v-if="item.name === '1'">
一好不好
</div>
<div v-else-if="item.name === '2'">
二好不好
</div>
<div v-else-if="item.name === '3'">
<Footer></Footer>
</div>
</div>
</el-tab-pane>
</el-tabs>
</div>
</div>
</div>
<el-dialog
title="提示"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose">
<span>你确定退出个人主页吗</span>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="handleGoHome">确 定</el-button>
</span>
</el-dialog>
</div>
</transition>
</template>
<script>
import logoImage from '@/assets/logo.jpg'
import Footer from '@/components/footer/footer.vue'
export default {
name: 'Background',
data () {
return {
dialogVisible: false,
leftHeight: '',
menuHeight: '',
imageUrl: logoImage,
firstName: 'produce',
activeName: '1',
menuList: [
{
name: '1',
title: '关于我们',
children: [
{
name: 'produce',
title: '公司介绍'
},
{
name: 'pingtai',
title: '我们的平台'
},
{
name: 'excellent',
title: '我们的优势'
},
{
name: 'do',
title: '我们的使命'
}
]
},
{
name: '2',
title: '服务商相关',
children: [
{
name: 'produce',
title: '公司介绍'
},
{
name: 'pingtai',
title: '我们的平台'
},
{
name: 'excellent',
title: '我们的优势'
},
{
name: 'do',
title: '我们的使命'
}
]
}
],
// tab
editableTabsValue: '1',
editableTabs: [],
tabIndex: 2,
tempName: ''
}
},
mounted () {
this.leftHeight = window.innerHeight - 46 + 'px'
},
components: {
Footer
},
created () {
document.title = '个人中心-API商城'
this.editableTabs.push({title: '选项1', name: '1'})
},
methods: {
handleGoHome () {
this.$router.push('/home')
},
handleQuit () {
this.dialogVisible = true
},
handleMenu (name) {
this.firstName = name
},
handleSelect (key, keyPath) {
const abc = {
title: '选项' + key,
name: key
}
const ids = this.editableTabs.findIndex(o => o.name === key)
if (ids === -1) {
this.editableTabs = this.editableTabs.concat(abc)
}
this.editableTabsValue = key
},
handleTabsEdit (targetName, action) {
// if (action === 'add') {
// let newTabName = ++this.tabIndex + ''
// this.editableTabs.push({
// title: 'New Tab',
// name: newTabName,
// content: 'New Tab content'
// })
// this.editableTabsValue = newTabName
// }
if (action === 'remove') {
let tabs = this.editableTabs
let activeName = this.editableTabsValue
if (activeName === targetName) {
tabs.forEach((tab, index) => {
if (tab.name === targetName) {
let nextTab = tabs[index + 1] || tabs[index - 1]
if (nextTab) {
activeName = nextTab.name
}
}
})
}
this.editableTabsValue = activeName
this.editableTabs = tabs.filter(tab => tab.name !== targetName)
}
}
}
}
</script>
<style lang='stylus' scoped>
@import '[email protected]/assets/css/variable.styl';
.backgroundWrapper {
background-color white
width 100%
.backgroundTop {
background-color #00192F
display flex
justify-content space-between
.logoWrapper {
margin-bottom 8px
padding-left 20px
border-right-style solid
padding-right 20px
border-width: 1px
border-color: #E4E4E4
margin-top 8px
display flex
.logoImg {
cursor pointer
width 50px
height 30px
background-repeat: no-repeat;
background-size: cover;
}
.logoText {
color #fff
font-weight bold
font-size 20px
}
}
.backgroundRight {
display flex
line-height 46px
color #fff
font-size 14px
.nickname {
border-left-style solid
border-right-style solid
padding-left 25px
padding-right 25px
border-width: 1px
border-color: #E4E4E4
}
.quitWrapper {
cursor pointer
margin-left 30px
margin-right 30px
}
}
}
.menuWrapper {
display flex
.leftWrapper {
width 300px
background-color #545C64
}
.contentWrapper {
width 100%
.topWrapper {
.caseWrapper {
padding 0px 10px
}
}
}
}
}
</style>
<style>
.el-header, .el-footer {
background-color: #B3C0D1;
color: #333;
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;
}
.topWrapper .el-tabs__new-tab {
display: none;
}
</style>
此文件你还需要安装less、动画transition、css里面还引入了一个variable.styl
variable.styl如下，放在assets下的css文件夹下：
// 背景色
$color-background = #f5f5f5
// 主题色
$color-theme = #ED6D00
$color-theme-1 = #1eb7a7
// 蒙层
$color-layer = rgba(0, 0, 0, 0.4)
$color-layer-1 = rgba(255, 255, 255, 0.4)
// 字体颜色，由浅到深
$color-text-1 = #333333
$color-text-2 = #666666 // 与字体“huawenxihei”搭配
$color-text-3 = #999999
$color-text-4 = #d3d3d3
$color-text-5 = #ffffff
// 边框颜色
$color-border = #E0E0E0
$color-white = #ffffff
// 阴影
$box-shadow = 0 0 12px #dfdfdf
// 分割线（横线、竖线）颜色
$color-divider = #e2e2e2
// 价格颜色, 星级评分颜色
$color-price = #00ceb9
$color-level = #ff9c00
$font-size-large = 20px
$font-size-title = 15px
$font-size-desc = 13px
$font-size-small = 11px
// 板块间间距
$margin-bottom-module = 10px
$margin-top-module = 10px
// 板块内边距 板块内部上下边距为20px; 板块内元素间左右边距为10px;
// 图片类圆角5px, 其他圆角3px
$border-radius-img = 5px
$border-radius-other = 3px
恭喜你到此时你就可以看到效果了。