iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 12
1
Modern Web

用 Nuxt.js 2.0, Vuetify, Storybook, Firebase 建一個 Blog系列 第 12

#12: Pages 簡單介紹與初建所有頁面功能

如果看過上一篇的 layout/default 的截圖,可以大概了解 blog 的樣子。

011-003

這邊先簡單拆分為兩個部分:

管理者相關(使用 layout/admin):

  • admin:
    • index: 列出所有文章(暫時不做 pagination)
    • signIn: 登入頁
    • addPost: 新增文章
    • postId: 編輯文章

使用者相關(使用 layout/default):

  • about: 關於我,用來介紹自己
  • pages: 列出第 N 頁的文章
  • posts:
    • index: 全文章標題列表
    • postId: 單篇文章瀏覽
  • tags:
    • index: 全部的 Tag 統計列表
    • tagId: 該 tag 相關所有文章列表

以上就是部落格基本的格式,之後的篇幅會逐步完成。

步驟大致上分為:

  • 各 UI 元件開發
  • Firebase 登入 & vuex/auth.js
  • Firestore & vuex
  • 各頁面切版與串接資料
  • 優化與部署細節

程式碼放在以下 branch:

012-init-needed-pages

指令:

git clone -b 012-init-needed-pages --single-branch https://github.com/hunterliu1003/blog.git
cd blog
npm install
npm run dev
# 連結至 localhost:8787

今天的內容較少,但已將所有需要的 pages 結構建立好如下圖:

012-001

可以透過以下網址看到各個路由:

localhost:8787
localhost:8787/about
localhost:8787/posts
localhost:8787/posts/1
localhost:8787/tags
localhost:8787/tags/tagName
localhost:8787/admin
localhost:8787/admin/signIn
localhost:8787/admin/addPost
localhost:8787/admin/1


上一篇
#11: 撰寫 Layouts (default, admin, error)
下一篇
#13 元件開發: TheTags
系列文
用 Nuxt.js 2.0, Vuetify, Storybook, Firebase 建一個 Blog30

尚未有邦友留言

立即登入留言