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

1 Like 0 留言 5674 瀏覽

鐵人賽 Modern Web DAY 13

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

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

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

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

1 Like 0 留言 5155 瀏覽

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

鐵人賽 Modern Web DAY 6

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

技術 #6: Storybook(含有兩個元件範例)

Storybook 簡介官方 Demo Storybook 方便我們開發 UI 元件，使用 storybook 可以看到 UI 元件在不同狀態下的樣貌。另外...

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

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

2 Like 0 留言 4749 瀏覽

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

3 Like 4 留言 4736 瀏覽

鐵人賽 Modern Web DAY 30

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

技術 30. 總結，路還長著

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

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

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

2 Like 2 留言 4301 瀏覽

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

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

0 Like 0 留言 2971 瀏覽

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

技術 Nuxt 3 + ESLint + Prettier 環境建置

前言大家好，我是 Ryan，這篇文章是我參與 iThome 2022 鐵人賽 [Day 04] Nuxt 3 + TypeScript + ESLint +...

Ryan ‧ 2022-09-19

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

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

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

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

0 Like 0 留言 1892 瀏覽

技術 [ Nuxt.js 2.x 系列文章 ] nuxt.config.js 設定檔

版本：nuxt 2.15.8 全名為 Nuxt configuration file，功能同 Vue 專案內 vue.config.js 檔，如果我們使用...

claire chang ‧ 2022-12-01

0 Like 0 留言 1834 瀏覽

鐵人賽 Modern Web DAY 27

分手前端菜雞之旅@非洲30天系列第 27 篇

技術 Nuxt3+Pinia好甜-D27

Pinia這顆鳳梨有夠甜 Pinia是Vue官方推薦的狀態管理工具，雖然官方列出一大堆好處，但對菜鳥我來說目前的好處是：沒有mutations其他好處如下，待我...

Global Rachel ‧ 2022-10-12 ‧團隊還不給我加薪

0 Like 0 留言 1777 瀏覽

鐵人賽 Vue.js DAY 18

深入 Vue.js 世界 : 30 Days 核心概念與實作系列第 18 篇

技術 DAY 18 - Vue + Vite + Nuxt 建立專案，享受最優質的 DX

DAY 18 - Vue + Vite + Nuxt 建立專案，享受最優質的 DX Vue3 + Vite + Nuxt 這次我主要是選擇使用Vue3 +...

阿蘇蘇 ‧ 2023-10-03 ‧團隊大船要開囉

1 Like 0 留言 1736 瀏覽

技術 [ Nuxt.js 2.x 系列文章 ] Nuxt.js 專案架設與目錄結構

版本：nuxt 2.15.8 說到 Nuxt，必須先從 Vue.js 說起，Vue.js 為專注在視圖層(View) 的 JS 框架，為 SPA（Singl...

claire chang ‧ 2022-11-21

2 Like 0 留言 1696 瀏覽

鐵人賽 Modern Web DAY 25

Vue 怎麼寫測試系列第 25 篇

技術 Day 25. 實作一個電商網站 - refactor

記得上 Github 拉專案來自己玩玩看: https://github.com/MOSapeizer/vue-ecommerce也可以發 pull reque...

Mos ‧ 2018-01-11 ‧團隊神功護體

1 Like 0 留言 1694 瀏覽

鐵人賽 Modern Web DAY 13

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

技術 #13 元件開發: TheTags

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

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

0 Like 0 留言 1540 瀏覽

技術 windows server pm2 開機自動重啟 (Windows startup script)

一開始開開心心的寫著Nuxt(2.x)，吃著火鍋唱著歌，然後跑個SSR(server side render)。就被伺服器重新開機給劫(結)了。如果你是從goo...

JD ‧ 2022-11-28

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

鐵人賽 Modern Web DAY 17

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

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

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

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

0 Like 1 留言 1111 瀏覽

鐵人賽 Modern Web DAY 26

分手前端菜雞之旅@非洲30天系列第 26 篇

技術把專案Nuxt3起來&config設定-D26

Nuxt 本來參加鐵人的初衷就是想要幫自己的side project搬個家，然後以此繼續寫Test & 架設後端。所以這邊之後就是實作筆記啦！最後還是...

Global Rachel ‧ 2022-10-11 ‧團隊還不給我加薪

0 Like 0 留言 874 瀏覽

鐵人賽 Vue.js DAY 28

深入 Vue.js 世界 : 30 Days 核心概念與實作系列第 28 篇

技術 DAY 28 - Nuxt 使用 useFetch 串接 API

DAY 28 - Nuxt 使用 useFetch 串接 API 前言延續上篇 ...DAY 27 - Nuxt Server 模擬 RESTful AP...

阿蘇蘇 ‧ 2023-10-13 ‧團隊大船要開囉

0 Like 0 留言 834 瀏覽

鐵人賽 Vue.js DAY 19

深入 Vue.js 世界 : 30 Days 核心概念與實作系列第 19 篇

技術 DAY 19 - Nuxt 專案目錄結構

DAY 19 - Nuxt 專案目錄結構今天來一起分解 Nuxt 專案架構，我們在前面有提到 Nuxt 優點之一易懂的目錄架構即使沒有這篇單看目錄架構...

阿蘇蘇 ‧ 2023-10-04 ‧團隊大船要開囉