iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

1 Like 1 留言 1916 瀏覽

鐵人賽 Modern Web DAY 25

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

技術 #25 撰寫所有 default 相關頁面切版與串接資料

發這篇文的時候，我人在機場準備出發去參加 Vue Fes Japan 2018，人生第一次出國參加 conference 啊，好興奮！所以這篇文就在桃園機場誕...

HunterLiu ‧ 2018-11-01 ‧團隊武裝狗狗

1 Like 0 留言 9415 瀏覽

鐵人賽 Modern Web DAY 16

Nuxt - 使用 Vue.js 做 SSR 的第一哩路系列第 16 篇

技術 16. Nuxt 全域設定檔 (nuxt.config.js)，可以吃嗎？

前幾篇提過頁面細部設定，對某一頁調 <head>、改 transition等細部調整。有些調整，突然 PM 希望套用到整個網站，該怎麼辦？而前文介...

Ralph ‧ 2018-10-31 ‧團隊InfoSec Horadrim

0 Like 0 留言 2661 瀏覽

鐵人賽 Modern Web DAY 24

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

技術 #24 撰寫所有 admin 相關頁面切版與串接資料

首先先複習一下所有 pages 的結構，在 Day12 Pages: 簡單介紹所有頁面大概有的功能有介紹本專案的全部頁面。今天來寫 admin 相關的所有頁...

HunterLiu ‧ 2018-10-31 ‧團隊武裝狗狗

0 Like 0 留言 10315 瀏覽

鐵人賽 Modern Web DAY 15

Nuxt - 使用 Vue.js 做 SSR 的第一哩路系列第 15 篇

技術 15. Nuxt 透過 fetch 動態產生內容，並在 Client 使用

這篇主題講「Nuxt 如何用 fetch 動態產生頁面內容」用來補充頁面細部設定複習一下 Nuxt 收到請求後的處理流程 asyncData 和 fetc...

Ralph ‧ 2018-10-30 ‧團隊InfoSec Horadrim

3 Like 0 留言 10440 瀏覽

鐵人賽 Modern Web DAY 14

Nuxt - 使用 Vue.js 做 SSR 的第一哩路系列第 14 篇

技術 14. Nuxt 透過 asyncData 動態產生頁面內容

這篇主題講「Nuxt 如何用 asyncData 動態產生頁面內容」用來補充頁面細部設定 asyncData 在執行順序中，排在頁面渲染(render)前，回...

Ralph ‧ 2018-10-29 ‧團隊InfoSec Horadrim

2 Like 0 留言 4307 瀏覽

鐵人賽 Modern Web DAY 22

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

技術 #22 Vuex Module Registration & Firebase 登入功能

已經過了 21 天，終於要進入 Vuex 相關的章節。在開始寫 code 之前，先分享一個 Vue 核心成員 Chris Fritz 今年的演講影片，介紹了...

HunterLiu ‧ 2018-10-29 ‧團隊武裝狗狗

1 Like 0 留言 5639 瀏覽

鐵人賽 Modern Web DAY 21

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

技術 #21 套件安裝及設定: Firebase 基礎設定

從第 13 ～ 20 天，將部落格所需要的所有元件開發完畢，這便簡單複習一下目前有的元件： TheTags (顯示標籤) TheMarkdown (預覽...

HunterLiu ‧ 2018-10-28 ‧團隊武裝狗狗

1 Like 0 留言 6312 瀏覽

鐵人賽 Modern Web DAY 13

Nuxt - 使用 Vue.js 做 SSR 的第一哩路系列第 13 篇

技術 13. Nuxt 客製頁面效果 - 轉場(Transition)

這篇是頁面客製段落其三，主題講「Nuxt 頁面轉場效果如何調整」回憶兩種暫態正在讀取中 => 讀取效果 (Loading) 頁面切換中 =>...

Ralph ‧ 2018-10-28 ‧團隊InfoSec Horadrim

2 Like 0 留言 2512 瀏覽

鐵人賽 Modern Web DAY 20

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

技術 #20 元件開發: FormAddPost (使用 simple-vue-validator)

今天開發的 FormAddPost 主要功能為新增/修改一篇文章的表單。會用到之前寫的元件: TheMarkdown vue-codemirror Po...

HunterLiu ‧ 2018-10-27 ‧團隊武裝狗狗

1 Like 0 留言 9095 瀏覽

鐵人賽 Modern Web DAY 12

Nuxt - 使用 Vue.js 做 SSR 的第一哩路系列第 12 篇

技術 12. Nuxt 客製頁面效果 - 讀取(Loading)

這篇是頁面客製段落其二，主題講「Nuxt 頁面讀取效果如何調整」用來補充頁面細部設定讓我們回想錯誤頁面，是用來「呈現錯誤狀態的頁面元件」而頁面渲染前，N...

Ralph ‧ 2018-10-27 ‧團隊InfoSec Horadrim

1 Like 0 留言 9970 瀏覽

鐵人賽 Modern Web DAY 11

Nuxt - 使用 Vue.js 做 SSR 的第一哩路系列第 11 篇

技術 11. Nuxt 頁面驗證和錯誤顯示

接下來幾篇都屬頁面客製，這篇講「Nuxt 發生錯誤時，他怎麼判斷與反應」先回顧這張流程圖 Nuxt 收到請求時，會經過這麼多步驟而碰到不可預期的錯誤或頁面...

Ralph ‧ 2018-10-26 ‧團隊InfoSec Horadrim

2 Like 0 留言 3530 瀏覽

鐵人賽 Modern Web DAY 18

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

技術 #18 套件安裝及設定: vue codemirror

今天會擴充套件 codemirror 和 vue-codemirror。使我們在部落格中編輯或發佈文章時，輸入的 markdown 是會有高亮的，這篇是為了之後...

HunterLiu ‧ 2018-10-25 ‧團隊武裝狗狗

1 Like 0 留言 1705 瀏覽

鐵人賽 Modern Web DAY 17

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

技術 #17 元件開發: ThePostPreview (default & admin 模式)

～～快要爆炸啦～～～～最近要趕工作～～～～快要齁不住了～～今天來寫一個文章摘要預覽的元件，主要有兩種模式： default: 使用者會看到的模式。 admi...

HunterLiu ‧ 2018-10-24 ‧團隊武裝狗狗

1 Like 0 留言 9944 瀏覽

鐵人賽 Modern Web DAY 9

Nuxt - 使用 Vue.js 做 SSR 的第一哩路系列第 9 篇

技術 09. Nuxt 頁面元件細部設定

Nuxt 頁面元件跟 Vue File 哪裡不同？ Nuxt Routing 自動映射介紹過，/pages 的 Vue File 對應各個頁面。雖然寫法一樣，...

Ralph ‧ 2018-10-24 ‧團隊InfoSec Horadrim

1 Like 0 留言 2517 瀏覽

鐵人賽 Modern Web DAY 16

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

技術 #16 元件開發: TheMarkdown 自定義樣式

經過了前面兩篇新增了 markdown-it 和 highlight.js，今天來開發 TheMarkdown 元件，因為所需要的套件和設定都已經在前兩篇完成，...

HunterLiu ‧ 2018-10-23 ‧團隊武裝狗狗

1 Like 0 留言 12228 瀏覽

鐵人賽 Modern Web DAY 8

Nuxt - 使用 Vue.js 做 SSR 的第一哩路系列第 8 篇

技術 08. Nuxt 客製《甜點電商》SEO 基本資訊

客製 SEO 資訊上一章讓登入頁有了基本樣貌，但需要 SSR 是為了解決兩大問題 SEO SMO 具體怎麼做？前端最基本的，在埋對應的 Meta T...

Ralph ‧ 2018-10-23 ‧團隊InfoSec Horadrim

1 Like 0 留言 4624 瀏覽

鐵人賽 Modern Web DAY 15

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

技術 #15 套件安裝及設定: highlight.js 使用與 markdown-it-highlightjs 自定義套件撰寫

highlight.js 可以幫助我們寫出有高亮的 markdown。其實已經有寫好的 markdown-it 套件，markdown-it-highligh...

HunterLiu ‧ 2018-10-22 ‧團隊武裝狗狗

2 Like 2 留言 17823 瀏覽

鐵人賽 Modern Web DAY 7

Nuxt - 使用 Vue.js 做 SSR 的第一哩路系列第 7 篇

技術 07. Nuxt 頁面怎麼切會更好？以電商登入頁為例

本來打算介紹 Nuxt 版面依功能劃分、由哪些區塊組成。想到六角學院才比完《甜點電商PK賽》，現成切好的版面很好找，參賽選手也不少，拿來說明與練習再適合不過。...

Ralph ‧ 2018-10-22 ‧團隊InfoSec Horadrim

3 Like 0 留言 6050 瀏覽

鐵人賽 Modern Web DAY 14

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

技術 #14 套件安裝及設定: markdown-it

markdown-it 是一個 markdown parser。官方 Demo 因為個人很喜歡寫 markdown，所以當然部落格也要可以用 markdown...

HunterLiu ‧ 2018-10-21 ‧團隊武裝狗狗

1 Like 0 留言 2149 瀏覽

鐵人賽 Modern Web DAY 13

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

技術 #13 元件開發: TheTags

上一篇將 blog 所需要的頁面整體結構都建好了，但其實內容都還沒有做啊。因為會用到許多套件，接下來的篇幅，會先將頁面所需要的元件寫完，再完成所有頁面的切版與...

HunterLiu ‧ 2018-10-20 ‧團隊武裝狗狗

1 Like 0 留言 2718 瀏覽

鐵人賽 Modern Web DAY 12

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

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

如果看過上一篇的 layout/default 的截圖，可以大概了解 blog 的樣子。這邊先簡單拆分為兩個部分：管理者相關(使用 layout/admi...

HunterLiu ‧ 2018-10-19 ‧團隊武裝狗狗

2 Like 2 留言 4887 瀏覽

鐵人賽 Modern Web DAY 11

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

技術 #11: 撰寫 Layouts (default, admin, error)

經過了十天，稍微回顧一下，目前的進度：我們現在有一個 Nuxt 2.0 應用，UI framework 是使用 Vuetify，並透過 storybook 協...

HunterLiu ‧ 2018-10-18 ‧團隊武裝狗狗

2 Like 2 留言 18768 瀏覽

鐵人賽 Modern Web DAY 4

Nuxt - 使用 Vue.js 做 SSR 的第一哩路系列第 4 篇

技術 04. Nuxt 環境建立

這篇寫常用情境產生新 Nuxt 專案 Vue.js SPA 寫一半，得追加 SSR 產生完整 Nuxt 專案入門寫 Vue.js，新專案用 Vue-cl...

Ralph ‧ 2018-10-19 ‧團隊InfoSec Horadrim

2 Like 0 留言 6215 瀏覽

鐵人賽 Modern Web DAY 10

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

技術 #10: Vuetify 導入 Storybook & Nuxt.js

上一篇將 vuetify 的 theme 拆成獨立的檔案 (vuetify.config.js)。這篇會將 vuetify 引入 storybook 中，同步...

HunterLiu ‧ 2018-10-17 ‧團隊武裝狗狗

3 Like 0 留言 19535 瀏覽

鐵人賽 Modern Web DAY 3

Nuxt - 使用 Vue.js 做 SSR 的第一哩路系列第 3 篇

技術 03. Nuxt.js 怎麼處理 SSR 問題？擔任什麼角色？

關於 Universal Rendering 前一篇提到，原本前後端的 View 各自分開隨著前端漸漸吃重，為了讓畫面邏輯不需要分散各處，有人提出新的架構 -...

Ralph ‧ 2018-10-18 ‧團隊InfoSec Horadrim

4 Like 0 留言 18605 瀏覽

鐵人賽 Modern Web DAY 9

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

技術 #9: Vuetify 簡介 + (vuetify.config.js)

Vuetify 是一個基於 Vue 的 UI 框架，類似於 Vuetify 的框架或函式庫有很多，例如： Element UI VueStrap...

HunterLiu ‧ 2018-10-16 ‧團隊武裝狗狗

4 Like 3 留言 42686 瀏覽

鐵人賽 Modern Web DAY 1

Nuxt - 使用 Vue.js 做 SSR 的第一哩路系列第 1 篇

達標好文技術 01. Nuxt.js 小跑起步

前言寫文是為了將最近用 Vue.js + Nuxt.js 的使用細節整理，供日後參考。順序也許跟官網不太一樣，請多多包涵。官方範例其實已涵蓋的大量情境，若是...

Ralph ‧ 2018-10-16 ‧團隊InfoSec Horadrim

2 Like 0 留言 5386 瀏覽

鐵人賽 Modern Web DAY 8

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

技術 #8: Plop: 三秒寫一個 component

上一篇，整合了 Storybook 和 Nuxt，也建立了一個元件為 MyButton。但如果每次要新增一個元件，就要建立四個檔案如下： index.js...

HunterLiu ‧ 2018-10-15 ‧團隊武裝狗狗

2 Like 1 留言 6409 瀏覽