記帳程式 (07)：記帳程式畫面布局

第 11 屆 iThome 鐵人賽

DAY 7

Modern Web

從零開始的個人化記帳程式開發系列第 7 篇

11th鐵人賽

ckchuang

團隊Wow Doge!

2019-09-23 23:22:15

6737 瀏覽

本文同步刊載於我的個人部落格：記帳程式｜07. 記帳程式畫面布局

經過好幾天枯燥無趣的環境設定，今天終於可以進到比較有趣的前端畫面開發了！

對於後面幾天要開發的功能，順手將前面第三篇規劃預計要做的功能畫成了心智圖，有地圖在手，才不會像前幾天莫名其妙就設定了三天的環境迷失方向（汗）。

不過看完全部要做的內容後，我可以大膽的假設 30 天做不完，估計只能做完基本功能的其中幾個，況且應該還要弄一些後端的內容讓整個系統更完整，有順利完賽的話之後再接續著完成這個「比想像中更麻煩」的 side project 吧！

頭都洗到第七天了，只好繼續洗下去了...

murmur 結束。於是今天要從最基本的網站的 layout 開始刻起，先將外框刻出來！

今日大綱

初探 Vue Element Admin
參考 Vue Element Admin 刻出基本布局

初探 Vue Element Admin

前幾天提到一個使用 Vue 與 element-ui 包好的「後台前端解決方案」，先附上官方文件：

也就是說，作者已經將大家實作後台時，可能會用到的元件都包山包海放進去了，直接載下來改比較省工沒錯，但稍微瀏覽後又將它 build 起來，發現這包程式實在太大包了，與其將它瘦身，不如參考它的結構，自己用 Vue 與 Element 建起來。

首先從布局開始看，官網文件貼心的給了圖：

考慮到我的記帳程式主要會用手機操作，可以收合的選單列是必要的，因此我會取用其中的 Sidebar（功能選單）、Navbar（標題及設定）、AppMain（內容），這三塊當作我的記帳程式布局。

測試了一下，在手機上也有不錯的效果，不過根據官方說法，element-ui 的定位是桌面端後台框架，是 vue-element-admin 自己簡單用 media query 做了 RWD，看來之後還是要自己調整。

記帳程式布局

於是參考 element-ui 中的「Container 布局容器」，安排出主要布局如下：

@/layout/index.vue

<template>
  <el-container class="app-layout">
    <Sidebar />
    <el-container>
      <Header />
      <el-main class="app-main">
        <slot />
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
  import Header from './components/Header'
  import Sidebar from './components/Sidebar'
  export default {
    name: 'Layout',
    components: { Header, Sidebar }
  }
</script>

@/layout/component/Header.vue

<template>
  <el-header
    class="app-header"
    height="60px"
  >
    <el-dropdown>
      <i
        class="el-icon-setting"
        style="margin-right: 15px"
      ></i>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item>設定</el-dropdown-item>
        <el-dropdown-item>登出</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    <span>Dez</span>
  </el-header>
</template>

@/layout/component/Sidebar.vue

<template>
  <el-aside
    class="app-sidebar"
    width="200px"
  >
    <el-menu>
      <el-menu-item index="1">
        <template slot="title"><i class="el-icon-notebook-1"></i>月記帳本</template>
      </el-menu-item>
      <el-menu-item index="2">
        <template slot="title"><i class="el-icon-money"></i>帳戶管理</template>
      </el-menu-item>
      <el-menu-item index="3">
        <template slot="title"><i class="el-icon-pie-chart"></i>圖表分析</template>
      </el-menu-item>
    </el-menu>
  </el-aside>
</template>

最後組合起來的成果如下：