iT邦幫忙

nuxt 3相關文章
共有 107 則文章
0 Like 0 留言 74 瀏覽
鐵人賽 自我挑戰組 DAY 20
《運用通勤時間打造線上履歷作品集：30 天 Nuxt 自我挑戰》 系列 第 20 篇

技術 Day 20 動態內容：用 Github api 自動化更新 Projects 資訊

每個 project-card 都需要以下資訊： 我希望「上次更新時間」能隨著 GitHub repo 的 commit 更新而自動同步。當我每次推送新版本（p...

huahaubuhau ‧ 2025-10-03
0 Like 0 留言 32 瀏覽
鐵人賽 自我挑戰組 DAY 19
《運用通勤時間打造線上履歷作品集：30 天 Nuxt 自我挑戰》 系列 第 19 篇

技術 Day 19 微微動畫效果

主要針對navbar進行微微動畫的設計： 1. 點擊 navbar 的 item，可以描點至該區塊 在navbar 的 item 加上點擊事件，並為每個區塊元件...

huahaubuhau ‧ 2025-10-02
0 Like 0 留言 31 瀏覽
鐵人賽 自我挑戰組 DAY 16
《運用通勤時間打造線上履歷作品集：30 天 Nuxt 自我挑戰》 系列 第 16 篇

技術 Day 16 圖片最佳化 Nuxt Image

網站裡圖片往往是最佔空間的資源，如果沒有處理，會拖慢載入速度、影響使用體驗。透過壓縮、Lazy Loading、自適應尺寸等方式，不僅能加快網頁載入，也能減少流...

huahaubuhau ‧ 2025-09-29
0 Like 0 留言 43 瀏覽
鐵人賽 自我挑戰組 DAY 15
《運用通勤時間打造線上履歷作品集：30 天 Nuxt 自我挑戰》 系列 第 15 篇

技術 Day 15 全站 RWD 檢查和微調

Day 15 的挑戰 focus 在 全站 RWD 檢查與微調。依序測試桌機、平板與手機版本，針對排版、字體、圖片大小與互動細節進行調整，確保在不同螢幕尺寸下都...

huahaubuhau ‧ 2025-09-28
0 Like 0 留言 54 瀏覽
鐵人賽 自我挑戰組 DAY 14
《運用通勤時間打造線上履歷作品集：30 天 Nuxt 自我挑戰》 系列 第 14 篇

技術 Day 14 表單進階（Google email 整合）

這個功能是：使用者按下送出表單後，可以自動將內容寄送到我的 email ，以便收到新訊息通知。通常會透過後端提供整合 api 來串接實作，但我不會後端，所以希望...

huahaubuhau ‧ 2025-09-27
0 Like 0 留言 28 瀏覽
鐵人賽 自我挑戰組 DAY 13
《運用通勤時間打造線上履歷作品集：30 天 Nuxt 自我挑戰》 系列 第 13 篇

技術 Day 13 進階模組化：Base 元件設計 - Input

在表單設計裡，輸入框是最常出現的元件，但它同時也有許多變化，例如文字、數字、日期、多行文字等等。如果每一種情境都獨立寫一份程式碼，不僅會造成重複，更難以維護。這...

huahaubuhau ‧ 2025-09-26
0 Like 0 留言 28 瀏覽
鐵人賽 自我挑戰組 DAY 12
《運用通勤時間打造線上履歷作品集：30 天 Nuxt 自我挑戰》 系列 第 12 篇

技術 Day 12 進階模組化：Base 元件設計 - Button

除了重複的區塊可以抽成元件外，最小的組成單元常見就是按鈕，它有很多不同的狀態，透過抽離成獨立元件，能確保整體介面的一致性與邏輯可維護性。 常見的基礎元件包含：...

huahaubuhau ‧ 2025-09-25
0 Like 0 留言 84 瀏覽
鐵人賽 自我挑戰組 DAY 11
《運用通勤時間打造線上履歷作品集：30 天 Nuxt 自我挑戰》 系列 第 11 篇

技術 Day 11 Contact section ＋ 基礎表單設計

今天的挑戰聚焦在 Contact 區塊，除了排版之外，也開始進入表單設計。版面配置延續整體風格：電腦版使用 雙欄式，手機版則轉為 單欄垂直排列，確保在不同裝置上...

huahaubuhau ‧ 2025-09-24
0 Like 0 留言 54 瀏覽
鐵人賽 自我挑戰組 DAY 10
《運用通勤時間打造線上履歷作品集：30 天 Nuxt 自我挑戰》 系列 第 10 篇

技術 Day 10 Toggle 展開/收合互動效果

在 Projects 區塊中，每個專案都會以卡片形式展示。隨著專案數量逐漸增加，若全部一口氣呈現，區塊會過於冗長，影響閱讀體驗。為了避免這種狀況，設計上加入了展...

huahaubuhau ‧ 2025-09-23
0 Like 0 留言 39 瀏覽
鐵人賽 自我挑戰組 DAY 9
《運用通勤時間打造線上履歷作品集：30 天 Nuxt 自我挑戰》 系列 第 9 篇

技術 Day 9 Projects section 1 — ProjectCard 元件設計

今天要完成 Project Section 的區塊，跟昨天的 Hardskills 建立元件的概念差不多。 主要切分成最外層的 project.vue （父元...

huahaubuhau ‧ 2025-09-22
0 Like 0 留言 43 瀏覽
鐵人賽 自我挑戰組 DAY 8
《運用通勤時間打造線上履歷作品集：30 天 Nuxt 自我挑戰》 系列 第 8 篇

技術 Day 8 Skills section 2 - 模組化設計Card 元件抽象化

昨天已建立的 skills.vue 檔案，並做好上半部的 work experience 和 softskills，今天是 Skills Section 的第二...

huahaubuhau ‧ 2025-09-21
0 Like 0 留言 46 瀏覽
鐵人賽 自我挑戰組 DAY 7
《運用通勤時間打造線上履歷作品集：30 天 Nuxt 自我挑戰》 系列 第 7 篇

技術 Day 7 Skills section 1 - 技能分類帽

今天的目標是完成 技能區塊 (Skills Section) 的設計，呼應 Intro 中「故事 + 技能」的定位，讓讀者能更快掌握我的專業輪廓。 層次化分類...

huahaubuhau ‧ 2025-09-20
0 Like 0 留言 37 瀏覽
鐵人賽 自我挑戰組 DAY 6
《運用通勤時間打造線上履歷作品集：30 天 Nuxt 自我挑戰》 系列 第 6 篇

技術 Day 6 Intro section 設計與實作 + UI/UX 提點

規劃 Intro Section 作為網站進入後的第一個重點區塊。此區塊主要透過簡短的自我介紹與背景故事，快速讓使用者理解我是誰、我的專業定位與核心價值。 1....

huahaubuhau ‧ 2025-09-19
0 Like 0 留言 48 瀏覽
鐵人賽 自我挑戰組 DAY 5
《運用通勤時間打造線上履歷作品集：30 天 Nuxt 自我挑戰》 系列 第 5 篇

技術 建立 NavBar

此專案會使用 vuetify UI 套件去改寫各個元件，今天要做的元件是 Header。 官方文件：https://vuetifyjs.com/en/compo...

huahaubuhau ‧ 2025-09-18
0 Like 0 留言 87 瀏覽
鐵人賽 自我挑戰組 DAY 4
《運用通勤時間打造線上履歷作品集：30 天 Nuxt 自我挑戰》 系列 第 4 篇

技術 Day 4 使用 SCSS 建立設計基礎

昨天已經安裝了 sass 和 sass-loader，這兩個就是 Nuxt/Vue 專案使用 SCSS（Sass）的必要套件。 在 /assets/scss 資...

huahaubuhau ‧ 2025-09-17
0 Like 0 留言 67 瀏覽
鐵人賽 自我挑戰組 DAY 3
《運用通勤時間打造線上履歷作品集：30 天 Nuxt 自我挑戰》 系列 第 3 篇

技術 Day 3 建立 Nuxt 3 專案 & 專案結構說明

首先，要先確保電腦有裝環境有 node.js，要 20.x 或更新才可以安裝 nuxt （當不同專案使用不同的 node 版本時，可以用 nvm 來切換 nod...

huahaubuhau ‧ 2025-09-16
0 Like 0 留言 50 瀏覽
鐵人賽 自我挑戰組 DAY 2
《運用通勤時間打造線上履歷作品集：30 天 Nuxt 自我挑戰》 系列 第 2 篇

技術 Day 2 履歷作品集應有的區塊 & UI/UX 畫面規劃

目標 打造一個線上履歷作品集網站，讓面試官能快速理解我的定位、技能、專案成果與聯絡方式，同時透過設計細節展現專業感。 內容架構 個人資料、學經歷 → 定位...

huahaubuhau ‧ 2025-09-15
0 Like 1 留言 126 瀏覽
鐵人賽 自我挑戰組 DAY 1
《運用通勤時間打造線上履歷作品集：30 天 Nuxt 自我挑戰》 系列 第 1 篇

技術 Day 1 開賽宣言 & 主題介紹：為什麼用 Vue/Nuxt 做網站

身為台北小小公司的小小社畜，每天花近3個小時通勤，好不容易（真的好不容易）這段時間可以常駐台北，省去大把通勤時間，要拿來做什麼呢？不可能都拿來滑手機、追劇吧，身...

huahaubuhau ‧ 2025-09-14
0 Like 1 留言 2121 瀏覽
鐵人賽 影片教學 DAY 30
Nuxt 3 快速入門 系列 第 30 篇

技術 [影片教學] Nuxt 3 部署網站服務

🔥【Vue.js → Nuxt 入門推薦！🌟 新書即將上市 🌟】📘《想要 SSR 嗎？就使用 Nuxt 吧！Nuxt 讓 Vue.js 更好處理 SEO 搜...

Ryan ‧ 2023-10-15
0 Like 1 留言 2238 瀏覽
鐵人賽 Vue.js DAY 30
Nuxt 3 實戰筆記 系列 第 30 篇

技術 [Day 30] Nuxt 3 版本的升級與套件升級的管理工具

🔥【Vue.js → Nuxt 入門推薦！🌟 新書即將上市 🌟】📘《想要 SSR 嗎？就使用 Nuxt 吧！Nuxt 讓 Vue.js 更好處理 SEO 搜...

Ryan ‧ 2023-10-15 ‧團隊啾嚕咕嚕跳起來
0 Like 0 留言 1200 瀏覽
鐵人賽 影片教學 DAY 29
Nuxt 3 快速入門 系列 第 29 篇

技術 [影片教學] Nuxt 3 部署前的建構打包

🔥【Vue.js → Nuxt 入門推薦！🌟 新書即將上市 🌟】📘《想要 SSR 嗎？就使用 Nuxt 吧！Nuxt 讓 Vue.js 更好處理 SEO 搜...

Ryan ‧ 2023-10-14
0 Like 0 留言 3434 瀏覽
鐵人賽 Vue.js DAY 29
Nuxt 3 實戰筆記 系列 第 29 篇

技術 [Day 29] Nuxt 3 混合渲染 (Hybrid Rendering) 中的 SWR 與 ISR

🔥【Vue.js → Nuxt 入門推薦！🌟 新書即將上市 🌟】📘《想要 SSR 嗎？就使用 Nuxt 吧！Nuxt 讓 Vue.js 更好處理 SEO 搜...

Ryan ‧ 2023-10-14 ‧團隊啾嚕咕嚕跳起來
0 Like 0 留言 1384 瀏覽
鐵人賽 影片教學 DAY 28
Nuxt 3 快速入門 系列 第 28 篇

技術 [影片教學] Nuxt 3 視覺化開發工具 Nuxt DevTools

🔥【Vue.js → Nuxt 入門推薦！🌟 新書即將上市 🌟】📘《想要 SSR 嗎？就使用 Nuxt 吧！Nuxt 讓 Vue.js 更好處理 SEO 搜...

Ryan ‧ 2023-10-13
0 Like 1 留言 2276 瀏覽
鐵人賽 Vue.js DAY 28
Nuxt 3 實戰筆記 系列 第 28 篇

技術 [Day28] Nuxt 3 建構打包與部署至 Cloudflare Workers

🔥【Vue.js → Nuxt 入門推薦！🌟 新書即將上市 🌟】📘《想要 SSR 嗎？就使用 Nuxt 吧！Nuxt 讓 Vue.js 更好處理 SEO 搜...

Ryan ‧ 2023-10-13 ‧團隊啾嚕咕嚕跳起來
0 Like 0 留言 1006 瀏覽
鐵人賽 影片教學 DAY 27
Nuxt 3 快速入門 系列 第 27 篇

技術 [影片教學] Nuxt 3 SEO 搜尋引擎最佳化 - 實戰部落格系列 Part 5

🔥【Vue.js → Nuxt 入門推薦！🌟 新書即將上市 🌟】📘《想要 SSR 嗎？就使用 Nuxt 吧！Nuxt 讓 Vue.js 更好處理 SEO 搜...

Ryan ‧ 2023-10-12
2 Like 1 留言 2016 瀏覽
鐵人賽 Vue.js DAY 27
Nuxt 3 實戰筆記 系列 第 27 篇

技術 [Day 27] Nuxt 3 產生靜態網頁部署至 Cloudflare Pages 與持續自動部署

🔥【Vue.js → Nuxt 入門推薦！🌟 新書即將上市 🌟】📘《想要 SSR 嗎？就使用 Nuxt 吧！Nuxt 讓 Vue.js 更好處理 SEO 搜...

Ryan ‧ 2023-10-12 ‧團隊啾嚕咕嚕跳起來
0 Like 1 留言 1822 瀏覽
鐵人賽 影片教學 DAY 26
Nuxt 3 快速入門 系列 第 26 篇

技術 [影片教學] Nuxt 3 路由頁面的權限判斷 - 實戰部落格系列 Part 4

🔥【Vue.js → Nuxt 入門推薦！🌟 新書即將上市 🌟】📘《想要 SSR 嗎？就使用 Nuxt 吧！Nuxt 讓 Vue.js 更好處理 SEO 搜...

Ryan ‧ 2023-10-11
0 Like 0 留言 4154 瀏覽
鐵人賽 Vue.js DAY 26
Nuxt 3 實戰筆記 系列 第 26 篇

技術 [Day 26] Nuxt 3 錯誤頁面 (Error Page) 與錯誤處理 (Error handling)

🔥【Vue.js → Nuxt 入門推薦！🌟 新書即將上市 🌟】📘《想要 SSR 嗎？就使用 Nuxt 吧！Nuxt 讓 Vue.js 更好處理 SEO 搜...

Ryan ‧ 2023-10-11 ‧團隊啾嚕咕嚕跳起來
0 Like 0 留言 877 瀏覽
鐵人賽 影片教學 DAY 25
Nuxt 3 快速入門 系列 第 25 篇

技術 [影片教學] Nuxt 3 Server API 權限判斷與串接 - 實戰部落格系列 Part 3

🔥【Vue.js → Nuxt 入門推薦！🌟 新書即將上市 🌟】📘《想要 SSR 嗎？就使用 Nuxt 吧！Nuxt 讓 Vue.js 更好處理 SEO 搜...

Ryan ‧ 2023-10-10
0 Like 0 留言 3875 瀏覽
鐵人賽 Vue.js DAY 25
Nuxt 3 實戰筆記 系列 第 25 篇

技術 [Day 25] Nuxt 3 深入靜態資源的使用 Public & Assets

🔥【Vue.js → Nuxt 入門推薦！🌟 新書即將上市 🌟】📘《想要 SSR 嗎？就使用 Nuxt 吧！Nuxt 讓 Vue.js 更好處理 SEO 搜...

Ryan ‧ 2023-10-10 ‧團隊啾嚕咕嚕跳起來
iThome鐵人賽
iThome鐵人賽
參賽組數
902 組
團體組數
37 組
累計文章數
17933 篇
完賽人數
223 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 17th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# linux windows server css react
熱門問題
熱門回答
熱門文章
IT邦幫忙