iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 7
2
Modern Web

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

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

  • 分享至 

  • xImage
  •  

本文同步刊載於我的個人部落格:記帳程式|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>

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

在主內容的地方,先引入一個暫時的 datepicker 確認畫面。

今天的程式碼請參考:Github

總結

今天從 vue-element-admin 參考了整體的布局,並自己另外用 element-ui 完成了記帳程式的布局,看起來好像有那麼一點樣子了,明天再繼續雕畫面後,就可以開始開發第一個功能 —— 「月記帳本」了,我們明天見!

參考資料與延伸閱讀


上一篇
記帳程式 (06):Linter、Formatter 設定與 Element UI 安裝
下一篇
記帳程式 (08):vue-router 與 menu 串接
系列文
從零開始的個人化記帳程式開發30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言