iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 1
4

前言

首先,這不太算一個 Nuxt 教學文,只是想分享自己用 Nuxt 建立一個 blog。
這次參賽的目標是想分享自己學到的知識,並記錄自己的學習過程,所以東西可能會非常零碎,請多多包涵。
若文章中有任何錯誤或更好的解決辦法,都非常歡迎留言批評指教。

簡介

本系列分享主要內容為:建立一個自己的 blog。

從技術的學習、研究、選用、實作,本系列並不會著墨於細節的教學,
分享模式基本上會是,簡單介紹需要的套件,再附上新增該套件或功能的過程和部分程式碼,
最後再附上當天進度的截圖,和對應文章進度的 github branch。
此系列所有程式碼都會放在一個 github repo,
對應的文章會有對應的 branch,
只要:

  1. clone 下該 branch
  2. npm install
  3. npm run storybook

    npm run dev

非常歡迎各位大大免費幫我 code review,挑毛病,鑽牛角尖,虛心接受。

也會分享相關深入學習的連結,提供有興趣的人深入研究,也歡迎於下方留言處互相討論。
本系列分享,主要注重在實作與問題解決。

本系列應用的技術與套件有:

在真正開始之前,讓我先列出這一系列文章,會需要的所有套件。

有興趣可以點以下連結去官網了解一下,接下來三十天會使用到的套件:

文章大綱

  1. 三秒建立一個 Nuxt 應用
  2. Nuxt.js: 簡介 (目錄結構)
  3. Nuxt.js: nuxt.config.js (設定檔)
  4. pug & stylus & 其他基礎設定
  5. Storybook (含有兩個元件範例)
  6. Storybook 和 Nuxt.js
  7. Plop: create a new component
  8. Vuetify 簡介 + (vuetify.config.js)
  9. Vuetify 導入 Storybook & Nuxt.js
  10. Layouts: (default, admin, error)
  11. Pages: 簡單介紹所有頁面大概有的功能
  12. 元件開發: TheTags
  13. 套件安裝及設定: markdown-it (整合 storybook & nuxt)
  14. 套件安裝及設定: markdown-it-highlightjs 自定義套件撰寫 highlight.js
  15. 元件開發: TheMarkdown 自定義樣式
  16. 元件開發: ThePostPreview (default & admin 模式)
  17. 套件安裝及設定: vue codemirror
  18. 為何我選擇 simple-vue-validator?
  19. 元件開發: FormAddPost (使用 simple-vue-validator)
  20. 套件安裝及設定: Firebase 基礎設定
  21. Vuex Module Registration & Firebase 登入功能
  22. Vuex module: tags, post
  23. 撰寫所有 admin 相關頁面切版與串接資料
  24. 撰寫所有 default 相關頁面切版與串接資料
  25. 在秋葉原導入 Disqus (vue-disqus)
  26. SplitChunks & Lodash & Vuetify tree shaking
  27. 將 Nuxt 應用部署到 Heroku
  28. 部署靜態頁面 Github Page 和 Firebase Hosting
  29. 總結: 未來 & 部落格部署與使用指南

介紹一下這次參賽團隊:

團名:「武裝狗狗」,團名由來請看link

團員介紹:

Summer - 你懂 JavaScript 嗎?
Yvonne - React 30天


下一篇
#2: 三秒建立一個 Nuxt 應用
系列文
用 Nuxt.js 2.0, Vuetify, Storybook, Firebase 建一個 Blog30

1 則留言

我要留言

立即登入留言