前言 寫文是為了將最近用 Vue.js + Nuxt.js 的使用細節整理，供日後參考。順序也許跟官網不太一樣，請多多包涵。 官方範例其實已涵蓋的大量情境，若是...
上一篇，在不知道 Nuxt 是什麼的情況下，使用create-nuxt-app建立了一個 Nuxt 應用。 今年 9/21 在倫敦舉辦的 Vue Confere...
關於 Universal Rendering 前一篇提到，原本前後端的 View 各自分開隨著前端漸漸吃重，為了讓畫面邏輯不需要分散各處，有人提出新的架構 -...
這篇寫常用情境 產生新 Nuxt 專案 Vue.js SPA 寫一半，得追加 SSR 產生完整 Nuxt 專案 入門寫 Vue.js，新專案用 Vue-cl...
本來打算介紹 Nuxt 版面依功能劃分、由哪些區塊組成。 想到六角學院才比完《甜點電商PK賽》，現成切好的版面很好找，參賽選手也不少，拿來說明與練習再適合不過。...
最近在 Frontend 技術圈裡，Server-Side-Rendering（SSR） 可說是一個越來越火熱的概念，剛好現在工作上的架構就是使用 Next.j...
圖片來源 Vuetify 簡介 Vuetify 是一個語意化元件的前端框架，提供簡潔、直觀、易於重複使用的元件，使 Vue 的開發者可以輕鬆解決前端的問題。...
稍有經驗的開發者，可能對最近 SPA，SSR 等術語不太陌生，大概也能知道 SPA 指的是單頁式應用（Single Page Application）、SSR...
什麼叫做 SSR? Server-Side Rendering，頁面由後端渲染，HTML由後端產生 傳統做法整頁HTML不就完全由後端產生嗎？ 使用後端...
前一章我們新增 /pages/product.vue編輯即可在 http://localhost:3000/product 預覽頁面。 pages/ --| p...
這篇打算介紹 Nuxt 可運行模式與解決情境其中兩種靠調整設定，決定是否需要 Node Server Universal SPA 以及單純靜態頁 靜態頁產...
這篇介紹 API 服務整合 若頁面內容不全靠 SSR 產生，部分頁面資料得透過瀏覽器向第三方、自架 API 後端抓取，會碰到跨域 + CORS 問題。 為什麼需...
嗨大家！連假第一天過得如何？～ 今天想跟大家分享的主題是各種網頁渲染模式，就是 SSG、SSR、CSR、ISR。長得都差不多，可是細節都不太一樣，在決定要用哪一...
前一章經 create-nuxt-app 生成的專案結構 放法按照 Nuxt 預設結構，相比 Vue.js 專案，已經幫你訂好了規則，方便對應與依循各資料夾對...
客製 SEO 資訊 上一章讓登入頁有了基本樣貌，但需要 SSR 是為了解決兩大問題 SEO SMO 具體怎麼做？ 前端最基本的，在 埋對應的 Meta T...
昨天有人問我引用圖片的路徑問題，答案整理成一篇補充雖說是圖片(image)、檔案(file)、樣式(css/scss/sass)、js等靜態資源，Nuxt 依其...
圖片來源 延續昨天的主題 Vuetify 中用到的技術大方向有： vue-router vuex vue-server-renderer webpack e...
這篇介紹靜態頁面部署方式讀者可用電商登入頁案例試試 Nuxt 命令介紹過運行模式差異，透過命令 $ yarn generate /* npm run gene...
這篇主題講「Nuxt 如何用 asyncData 動態產生頁面內容」 用來補充頁面細部設定 asyncData 在執行順序中，排在頁面渲染(render)前，回...
這篇主題講「Nuxt 如何用 fetch 動態產生頁面內容」 用來補充頁面細部設定 複習一下 Nuxt 收到請求後的處理流程 asyncData 和 fetc...
前一天介紹了 SSR 基本概念，今天則是要介紹 React 最有名的 SSR 框架：Next.js。 今天不是要來講 Next.js 怎麼使用，畢竟網路上學習資...
Nuxt 以 Universal 模式運行下，後端會起 Node Server (預設是 http://127.0.0.1:3000 ) 網站服務一般都走 8...
接下來幾篇都屬頁面客製，這篇講「Nuxt 發生錯誤時，他怎麼判斷與反應」 先回顧這張流程圖 Nuxt 收到請求時，會經過這麼多步驟 而碰到不可預期的錯誤或頁面...
Nuxt 頁面元件跟 Vue File 哪裡不同？ Nuxt Routing 自動映射介紹過，/pages 的 Vue File 對應各個頁面。 雖然寫法一樣，...
上一篇解釋 Nuxt 插件 (Plugins)用於管理特定執行環境的程式碼片段，並在 Nuxt App 自動載入、執行 Plugin 使用 一貫簡單風格，需要載...
複習一下 asyncData 動態產生頁面，作業得透過 axios 拉 product api，藉此產生商品頁面的情境 安裝 Axios $ yarn add...
本篇要回溯「Nuxt 請求處理流程」，介紹 validate() 前一步驟 - Middleware Middleware 中文翻譯為 中介軟體、中間件、中介...
前幾篇提過頁面細部設定，對某一頁調 <head>、改 transition等細部調整。 有些調整，突然 PM 希望套用到整個網站，該怎麼辦？而前文介...
這篇是頁面客製段落其二，主題講「Nuxt 頁面讀取效果如何調整」 用來補充頁面細部設定 讓我們回想錯誤頁面，是用來「呈現錯誤狀態的頁面元件」 而頁面渲染前，N...
如果前輩說什麼你就做什麼，長久下來你會失去判斷能力。 除非你是草創成員，不然進入一間公司後，往往都是跟著前輩訂下的規則走；大部分的前輩在交接的時候只會說要這...
Ralph
HunterLiu
莫力全 Kyle Mo
Gary
Jade
寶寶出頭天
iThome鐵人賽
看影片追技術