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

谁践踏了优雅 2022-05-08 06:46 973阅读 0赞

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

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

![70][]

**实现步骤：**

**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-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 '~@/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

恭喜你到此时你就可以看到效果了。

[70]: /images/20220508/9ebaac282e454b89a4bb0a7f8fb237ce.png