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

0 Like 0 留言 5912 瀏覽

鐵人賽 Modern Web DAY 21

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

技術 21. Nuxt 處理首屏 - `<no-ssr>`

偶而還是會碰到某些區塊不想預先渲染，把某一區塊渲染的負荷分到 Browser，跟SPA一樣做CSR 今天主題寫另一個內建元件 - <no-ssr>...

Ralph ‧ 2018-11-05 ‧團隊InfoSec Horadrim

1 Like 0 留言 5873 瀏覽

鐵人賽 Modern Web DAY 20

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

技術 20. Nuxt `<nuxt-link>` 有什麼特別

根據文件所寫就目前而言 <nuxt-link> 和 <router-link> 一樣點擊功能太常用，身為工程師還是看個仔細實...

Ralph ‧ 2018-11-04 ‧團隊InfoSec Horadrim

0 Like 0 留言 2972 瀏覽

鐵人賽 Modern Web DAY 28

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

技術 #28 將 Nuxt 應用部署到 Heroku

今天還沈浸在昨天 Vue Fes Japan 2018 的興奮狀態，雖然是滿滿的收穫，但還是要回到現實繼續寫鐵人賽，根本日本鐵人賽之旅...... 直接進入正題...

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

0 Like 0 留言 8645 瀏覽

鐵人賽 Modern Web DAY 19

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

技術 19. Nuxt Middleware，請求與回應間的中盤商

本篇要回溯「Nuxt 請求處理流程」，介紹 validate() 前一步驟 - Middleware Middleware 中文翻譯為中介軟體、中間件、中介...

Ralph ‧ 2018-11-03 ‧團隊InfoSec Horadrim

0 Like 0 留言 14187 瀏覽

鐵人賽 Modern Web DAY 18

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

技術 18. Nuxt 運行模式 (Mode) 差在哪？

這篇打算介紹 Nuxt 可運行模式與解決情境其中兩種靠調整設定，決定是否需要 Node Server Universal SPA 以及單純靜態頁靜態頁產...

Ralph ‧ 2018-11-02 ‧團隊InfoSec Horadrim

1 Like 1 留言 2339 瀏覽

鐵人賽 Modern Web DAY 26

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

技術 #26 在秋葉原導入 Disqus (vue-disqus)

昨天夜宿機場寫鐵人賽和搭飛機實在太累了，也完全沒睡到，到東京後找了一間 starbucks 瘋狂寫鐵人賽(其實是太累走不動)，也寫了一個下午。發佈這篇的同時，...

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

0 Like 0 留言 10405 瀏覽

鐵人賽 Modern Web DAY 17

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

技術 17. Nuxt 靜態資源 (Assets) 管理和引用

昨天有人問我引用圖片的路徑問題，答案整理成一篇補充雖說是圖片(image)、檔案(file)、樣式(css/scss/sass)、js等靜態資源，Nuxt 依其...

Ralph ‧ 2018-11-01 ‧團隊InfoSec Horadrim

1 Like 1 留言 1503 瀏覽

鐵人賽 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 留言 8364 瀏覽

鐵人賽 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 留言 2199 瀏覽

鐵人賽 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 留言 9280 瀏覽

鐵人賽 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 留言 9376 瀏覽

鐵人賽 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 留言 3755 瀏覽

鐵人賽 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 留言 4338 瀏覽

鐵人賽 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 留言 5675 瀏覽

鐵人賽 Modern Web DAY 13

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

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

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

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

1 Like 0 留言 7816 瀏覽

鐵人賽 Modern Web DAY 12

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

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

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

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

2 Like 0 留言 2023 瀏覽

鐵人賽 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 留言 8978 瀏覽

鐵人賽 Modern Web DAY 11

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

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

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

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

2 Like 0 留言 2984 瀏覽

鐵人賽 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 留言 1466 瀏覽

鐵人賽 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 留言 9293 瀏覽

鐵人賽 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 留言 11443 瀏覽

鐵人賽 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 留言 2048 瀏覽

鐵人賽 Modern Web DAY 16

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

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

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

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

2 Like 2 留言 16469 瀏覽

鐵人賽 Modern Web DAY 7

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

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

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

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

1 Like 0 留言 3335 瀏覽

鐵人賽 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 ‧團隊武裝狗狗

3 Like 0 留言 4789 瀏覽

鐵人賽 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 留言 1694 瀏覽

鐵人賽 Modern Web DAY 13

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

技術 #13 元件開發: TheTags

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

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

1 Like 0 留言 2318 瀏覽

鐵人賽 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 留言 17030 瀏覽

鐵人賽 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 2 留言 4301 瀏覽