在吗？手把手教vue-cli4+elementUI搭建通用后台管理系统---(一)UI界面搭建之head头部

---

前言

后台管理系统的大致UI如下图所示，今后我会以下图所示界面，搭建一个后台管理系统。本文需要有一定的前端基础和封装思想

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、准备工作

首先，你得使用创建一个vue-cli的项目，本文使用的是vue-cli4并且安装elementUI。 public文件夹下创建css、img、js文件夹如下图所示：

Home.vue只保留如下代码：

<template>
  <div>
  </div>
</template>

<script>
// @ is an alias to /src
export default {
  name: "Home",
  components: {
  },
  data() {
    return {
    }
  },
  mounted() {

  },
  methods: {
    submit(val){
    
    }
  }
};
</script>

二、分析需求

拿个这个UI原型图，首先考虑界面组成，我将页面划分成了四个部分（根据自身需求动态调整），头部、侧边栏、标签页、面包屑导航（）、正文，最终我们将这几部分在Home.vue里面组合，本篇文章会先讲头部。

1.头部

头部

原型图中，头部包括logo、缩放按钮、中英文切换按钮、欢迎词、退出系统按钮。

1. logo
2. 缩放按钮
3. 中英文切换按钮
4. 欢迎词
5. 退出系统按钮

2.侧边栏菜单

代码如下（示例）：

请看-> 侧栏导航

---

3.标签tags

代码如下（示例）：

---

4.中间正文

代码如下（示例）：

---

5.面包屑导航

代码如下（示例）：

---

三、创建头部TheHeader.vue组件

根据vue.js官网风格指南只应该拥有单个活跃实例的组件应该以 The 前缀命名，以示其唯一性。

也就是说The开头的组件，在一个页面中只能用一次，但是可以应用在多个页面，比如TheHeader.vue头部组件，一个页面只能存在一个头部。
附上：风格指南

在项目目录src/views下创建一个TheHeader.vue文件，代码如下：

<template>
  <div class="header">
    <div class="logo">
      <!--  -->
      <img src="../../public/img/logo.png" />
    </div>
    <div class="header-right">
      <div class="btn-fullscreen" @click.stop="handleFullScreen">
        <el-tooltip
          effect="light"
          :content="fullscreen ? '取消全屏' : '全屏'"
          placement="bottom"
        >
          <i class="iconfont icon-suofang"></i>
        </el-tooltip>
      </div>
      <div class="btn-changelan" @click.stop="handleLanguage">
        <el-tooltip
          effect="light"
          :content="language == 'en' ? '中文' : 'English'"
          placement="bottom"
        >
        <i class="iconfont icon-yingwen"></i>
        <!-- <span>{{language}}</span> -->
        </el-tooltip>
      </div>
      <div class="welcome">
        <el-dropdown @command="handleCommand">
          <span class="el-dropdown-link">
            <span class="w-text">欢迎您：&ensp;{{user}}</span><i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="a">个人中心</el-dropdown-item>
            <el-dropdown-item command="b">账号设置</el-dropdown-item>
            <el-dropdown-item command="c">螺蛳粉</el-dropdown-item>
            <el-dropdown-item command="d" disabled>双皮奶</el-dropdown-item>
            <el-dropdown-item command="e" divided>蚵仔煎</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div>
        <el-tooltip
          effect="light"
          content="退出系统"
          placement="bottom"
        >
        <i class="iconfont icon-tuichu"></i>
        </el-tooltip>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      fullscreen: false,
      language: "en", //zh简体中文,en英文
      user: "张三"
    };
  },
  components: {},
  mounted() {},
  methods: {
    handleFullScreen() {
      console.log("点击了放大缩小按钮");
    },
    handleLanguage() {
      console.log("切换语言");
    },
    handleCommand(command) {
        this.$message('click on item ' + command);
    }
  }
};
</script>

<style scoped>
.header{
    background-color: #242f42;
    height: 70px;
}


.logo{
    width: 70px;
    height: 70px;
    float: left;
    margin-left: 30px;
}
.header-right{
    float: right;
    width: 300px;
    height: 70px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.iconfont{
    color: white;
    font-size: 22px;
}

.logo img{
    width:auto;
    height:auto;
    max-width:100%;
    max-height:100%;
}

.btn-changelan>span{
    color: white;
    font-size: 18px;
}

.w-text{
    font-size: 14px;
    color: white;
}

.el-dropdown-link {
    cursor: pointer;
    color: white;
  }
  
.el-icon-arrow-down {
    font-size: 12px;
}
</style>

注意事项

1. 以上样式是自定义css，需要自己编写和引用
2. 字体图标使用的是阿里巴巴iconfont，使用方式为font-class引用，值得注意的是生成的fontclass代码在public/index.html的head标签中引用，如下图所示：
3. 关于elementUI的使用，自己查看官网，使用时注意与项目中安装的版本一致，官网示例非常详细，复制粘贴拿过来改一改就可以用
4. 本篇文章先构建界面，后面再做业务逻辑处理

1.在Home.vue中拼接头部

Home.vue代码如下：

<template>
  <div>
    <TheHeader></TheHeader>
  </div>
</template>

<script>
// @ is an alias to /src
import TheHeader from '@/views/TheHeader.vue';
export default {
  name: "Home",
  components: {
    TheHeader
  },
  data() {
    return {
    }
  },
  mounted() {
    console.log("mounted");
  },
  methods: {
  },
};
</script>

四、查看头部效果

成品效果如下图：

悬浮效果如下：

---

国际化中英文切换传送门

---

总结

以上就是今天要讲的内容，本文仅仅简单构建后台管理系统的头部。