前言

後臺管理系統的大致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>