昨天針對 vue-route 及 menu 的部分調整好了後，終於可以開始做功能開發了！

今天就要著手來進行第一個基本功能 —— 月記帳本。

安排檔案結構

今天的原始碼參考：Github

說明頁面開發檔案結構：

• views：頁面的最外層，會引入各種 containers、components。
• containers：區分頁面結構的容器，將頁面區分成好幾個區塊，並引入必要的 components。
• components：畫面的最小單位元件，放共用元件。

下面會以「月記帳本」這個頁面為例說明。

月記帳本畫面開發

先看今天的結果：

可以看到在月記帳本這個畫面中，主要會需要三個大區塊：

• BillingCalendar：記帳用的月曆
• BillingList：收入、支出、轉帳明細列表
• BillingDialog：新增記帳紀錄時的對話框

因此將這三大區塊切成各個 container 管理程式碼，並由 @/views/Billing/index.vue 整合這三個 container：

<template>
  <div class="pg-billing">
    <BillingCalendar />
    <BillingList />
    <BillingDialog />
  </div>
</template>

而「記帳紀錄列表」與「記帳對話框」這兩個部分，目前先使用假資料安排畫面。

利用 element-ui 中的 el-table 及 el-dialog 即可快速達到畫面中的需求，UI 元件庫用起來就是這麼方便：

<el-dialog title="新增紀錄" :visible.sync="dialogFormVisible">
  <el-form :model="form" label-width="80px">
    <el-form-item label="金額">
      <el-input
        v-model.number="form.dollor"
        placeholder="請輸入金額"
        autocomplete="off"
      ></el-input>
    </el-form-item>
    <el-form-item label="類別">
      <el-select v-model="form.type" placeholder="请選擇類別">
        <el-option label="早餐" value="breakfast"></el-option>
        <el-option label="午餐" value="lunch"></el-option>
        <el-option label="晚餐" value="dinner"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="帳戶">
      <el-select v-model="form.account" placeholder="请選擇帳戶">
        <el-option label="現金" value="cash"></el-option>
        <el-option label="信用卡" value="credit-card"></el-option>
        <el-option label="電子支付" value="pay"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="項目">
      <el-input
        v-model="form.title"
        placeholder="請輸入項目內容"
        autocomplete="off"
      ></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogFormVisible = false"
      >儲存</el-button
    >
  </div>
</el-dialog>

小結

今天將月記帳本的基本畫面安排好了，明天就可以開始來串各個區塊間的資料囉，我們明天見！

後記

今天快 20:00 才下班，回家馬上趕鐵人賽文章，這個一步一步逼近 deadline 的感覺真刺激啊！