前言

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

簡介

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

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

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

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

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

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

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

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

• Vue, Vuex, vue-router
• Nuxt.js
• Vuetify
• Firebase
• Storybook
• Plop
• Lodash
• Webpack
• Disqus
• simple-vue-validator
• codemirror
• markdown-it
• highlight.js
• pug, stylus

文章大綱

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

介紹一下這次參賽團隊：

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

團員介紹：

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