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

0 Like 0 留言 6104 瀏覽

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

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

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

鐵人賽 Modern Web DAY 18

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

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

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

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

0 Like 0 留言 10784 瀏覽

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

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

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

鐵人賽 Modern Web DAY 14

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

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

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

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

1 Like 0 留言 5946 瀏覽

鐵人賽 Modern Web DAY 13

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

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

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

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

1 Like 0 留言 8253 瀏覽

鐵人賽 Modern Web DAY 12

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

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

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

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

1 Like 0 留言 9256 瀏覽

鐵人賽 Modern Web DAY 11

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

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

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

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

1 Like 0 留言 9639 瀏覽

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

鐵人賽 Modern Web DAY 8

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

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

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

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

2 Like 2 留言 17134 瀏覽

鐵人賽 Modern Web DAY 7

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

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

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

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

2 Like 0 留言 15818 瀏覽

鐵人賽 Modern Web DAY 6

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

技術 06. Nuxt Routing 規則入門

前一章我們新增 /pages/product.vue編輯即可在 http://localhost:3000/product 預覽頁面。 pages/ --| p...

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

1 Like 0 留言 11783 瀏覽

鐵人賽 Modern Web DAY 5

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

技術 05. Nuxt 產生簡單頁面

前一章經 create-nuxt-app 生成的專案結構放法按照 Nuxt 預設結構，相比 Vue.js 專案，已經幫你訂好了規則，方便對應與依循各資料夾對...

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

2 Like 2 留言 17907 瀏覽

鐵人賽 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

3 Like 0 留言 18682 瀏覽

鐵人賽 Modern Web DAY 3

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

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

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

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

5 Like 1 留言 16024 瀏覽

鐵人賽 Modern Web DAY 2

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

技術 02. 講歷史，話說 SSR...

什麼叫做 SSR? Server-Side Rendering，頁面由後端渲染，HTML由後端產生　　傳統做法整頁HTML不就完全由後端產生嗎？使用後端...

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

4 Like 3 留言 38447 瀏覽

鐵人賽 Modern Web DAY 1

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

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

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

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

4 Like 0 留言 23458 瀏覽

鐵人賽 Modern Web DAY 3

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

技術 #3: Nuxt.js 簡介＆學習連結分享

上一篇，在不知道 Nuxt 是什麼的情況下，使用create-nuxt-app建立了一個 Nuxt 應用。今年 9/21 在倫敦舉辦的 Vue Confere...

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

0 Like 0 留言 4070 瀏覽

鐵人賽 Modern Web DAY 23

用範例理解 Vue.js 系列第 23 篇

技術用範例理解 Vue.js #23：webpack in Vuetify

圖片來源延續之前的主題 Vuetify 中用到的技術大方向有： vue-router vuex vue-server-renderer webpack e...

HunterLiu ‧ 2018-01-02 ‧團隊露天廢物

0 Like 0 留言 6194 瀏覽

鐵人賽 Modern Web DAY 22

用範例理解 Vue.js 系列第 22 篇

技術用範例理解 Vue.js #22：vue-server-renderer in Vuetify

圖片來源延續之前的主題 Vuetify 中用到的技術大方向有： vue-router vuex vue-server-renderer webpack e...

HunterLiu ‧ 2018-01-01 ‧團隊露天廢物

0 Like 0 留言 10443 瀏覽

鐵人賽 Modern Web DAY 20

用範例理解 Vue.js 系列第 20 篇

技術用範例理解 Vue.js #20：vue-router in Vuetify

圖片來源延續昨天的主題 Vuetify 中用到的技術大方向有： vue-router vuex vue-server-renderer webpack e...

HunterLiu ‧ 2017-12-30 ‧團隊露天廢物

1 Like 1 留言 16587 瀏覽