前言

后臺管理系統的大致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">
      <!-- 這個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>
</style>

注意事項

以上樣式是自定義css，需要自己撰寫和參考
字體圖示使用的是阿里巴巴iconfont，使用方式為font-class參考，值得注意的是生成的fontclass代碼在public/index.html的head標簽中參考，如下圖所示：
關于elementUI的使用，自己查看官網，使用時注意與專案中安裝的版本一致，官網示例非常詳細，復制粘貼拿過來改一改就可以用
本篇文章先構建界面，后面再做業務邏輯處理

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>