第十五屆 佳作

vue-js
Nuxt 3 初學者指南:30天從基礎到實踐
創星

系列文章

DAY 1

Day 1 – 為什麼我們需要 Nuxt

Nuxt vs Vue Vue 是一個用於構建客戶端應用程式的框架,預設情況下 Vue 組件將以客戶端渲染 (Client Side Rendering,簡稱...

DAY 2

Day 2 – Nuxt 3 核心功能概念(上)

Day2 – Nuxt 3 核心功能概念(上) 正式進入專案與實作之前,先來了解幾個關於 Nuxt 3 的核心功能概念。 Auto-imports Nuxt 3...

DAY 3

Day 3 – Nuxt 3 核心功能概念(下)

今天將繼續介紹 Nuxt 3 的核心功能概念,若還沒讀過 Day 2 – Nuxt 3 核心功能概念(上) 的朋友們也別忘了在實作前先認識這些重要的概念! Se...

DAY 4

Day 4 – 建立第一個 Nuxt 3 專案

今天將開始建置專案並說明相關指令,若還沒讀過 Day2 – Nuxt 3 核心功能概念(上)、Day3 – Nuxt 3 核心功能概念(下)的朋友們也別忘了在實...

DAY 5

Day 5 – Nuxt 3 目錄結構

今天我們將介紹 Nuxt 3 專案的目錄結構。如果你還沒有建立 Nuxt 3 專案,可以參考 Day 4 – 建立第一個 Nuxt 3 專案 會一步步帶領你建立...

DAY 6

Day 6 – Nuxt 3 Composables(組合式函數)

Composables 是 Vue 3 Composition API 的重要概念,將共用的有狀態邏輯(stateful logic)寫成一個可重用的函式以提高...

DAY 7

Day 7 – Nuxt 3 Utils(實用函式)

除了昨天提到 Nuxt 3 Composables 有許多共用的函式,在 utils/ 也會存放輔助函式和其他通用工具,同樣透過自動導入功能,整個專案中都能更方...

DAY 8

Day 8 – Nuxt 3 Components(元件)

熟悉 Vue 的朋友對於 Components(元件)想必都不陌生,它是 Vue 中的一個重要概念和核心功能,將網頁元素拆分成多個獨立的小部分,再利用這些元件來...

DAY 9

Day 9 – Nuxt 3 Components <ClientOnly>

Day 9 – Nuxt 3 Components &lt;ClientOnly&gt; Nuxt 3 提供了一個名為 &lt;ClientOnly&gt; 的...

DAY 10

Day 10 - Nuxt 3 Pages & Routing(頁面及路由)

在 Nuxt 3 中一旦新增 pages/ 資料夾,裡面的檔案會自動對應路由(自動整合 vue-router),省去繁雜的設定讓開發過程更加直觀有效率。 如何使...