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

2 Like 0 留言 2256 瀏覽

鐵人賽 Modern Web

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

技術 32. Nuxt 整合 API 服務

這篇介紹 API 服務整合若頁面內容不全靠 SSR 產生，部分頁面資料得透過瀏覽器向第三方、自架 API 後端抓取，會碰到跨域 + CORS 問題。為什麼需...

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

1 Like 1 留言 1725 瀏覽

鐵人賽 Modern Web

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

技術 31. Nuxt 部署 - 反向代理

Nuxt 以 Universal 模式運行下，後端會起 Node Server (預設是 http://127.0.0.1:3000 ) 網站服務一般都走 8...

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

2 Like 3 留言 847 瀏覽

鐵人賽 Modern Web DAY 30

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

技術 30. 總結，路還長著

第 30 天，聊一下開始玩 Nuxt 的緣由 (本來想寫整合 API 服務，發現內容前面沒提觀念太多，有點跳) 一開始嘗試處理 SEO 混著後端框架寫 Vue...

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

1 Like 0 留言 689 瀏覽

鐵人賽 Modern Web DAY 29

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

技術 29. Nuxt Universal App 部署至 Heroku

前一篇介紹靜態頁部署，若換成 Universal Mode 呢？「需要個 Node Server，不時讓人戳」當工程師懶得管機器 (或你分身乏術)，想把環境...

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

2 Like 0 留言 679 瀏覽

鐵人賽 Modern Web DAY 28

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

技術 28. Nuxt 靜態頁部署

這篇介紹靜態頁面部署方式讀者可用電商登入頁案例試試 Nuxt 命令介紹過運行模式差異，透過命令 $ yarn generate /* npm run gen...

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

0 Like 0 留言 788 瀏覽

鐵人賽 Modern Web DAY 27

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

技術 27. @nuxtjs/axios 如何透過 module 包裝 axios

Nuxt Axios 模組 - @nuxtjs/axios ，是官方推薦使用的 HTTP Client Module 主要功能及組成有 axios 提供 H...

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

1 Like 0 留言 878 瀏覽

鐵人賽 Modern Web DAY 26

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

技術 26. Nuxt Module，Nuxt 的擴充元件

Nuxt 不像 Angular 這種大型框架，功能包山包海，核心功能不夠得自行擴充。雖然提過如何透過全域/頁面設定客製、用 Plugin 收納初始化片段，但對...

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

0 Like 0 留言 805 瀏覽

鐵人賽 Modern Web DAY 25

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

技術 25. Nuxt Plugin 如何讓 Axios 更好用 (下)

上一篇解釋 Nuxt 插件 (Plugins) 用於管理特定執行環境的程式碼片段，並在 Nuxt App 自動載入、執行 Plugin 使用一貫簡單風格，需要...

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

2 Like 0 留言 630 瀏覽

鐵人賽 Modern Web DAY 24

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

技術 24. Nuxt Plugin 如何讓 Axios 更好用 (上)

複習一下 asyncData 動態產生頁面，作業得透過 axios 拉 product api，藉此產生商品頁面的情境安裝 Axios $ yarn add...

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

2 Like 0 留言 544 瀏覽

鐵人賽 Modern Web DAY 23

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

技術 23. Nuxt 細說`<nuxt-child>` 和 `<nuxt>`

這篇打算為 Nuxt 內建元件收尾，介紹最後兩種 <nuxt-child> <nuxt> 回顧上一章，巢狀路由讓 slug...

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

0 Like 0 留言 531 瀏覽

鐵人賽 Modern Web DAY 22

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

技術 22. Nuxt Routing 進階 - 巢狀路由/嵌套路由 (Nested Routes)

Nuxt 路由入門篇介紹過兩層動態路由 pages/ --| _slug/ -----| comments.vue -----| index.vue --|...

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

0 Like 0 留言 389 瀏覽

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

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

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

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

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

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

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

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

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

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

鐵人賽 Modern Web DAY 15

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

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

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

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

2 Like 0 留言 507 瀏覽

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

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

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

鐵人賽 Modern Web DAY 13

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

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

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

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

1 Like 0 留言 570 瀏覽

鐵人賽 Modern Web DAY 12

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

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

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

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

2 Like 0 留言 294 瀏覽

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

鐵人賽 Modern Web DAY 11

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

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

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

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

2 Like 0 留言 412 瀏覽