這個系列文章將帶領初學者在30天內從 Nuxt 3 的基礎到實踐,藉由範例讓你了解 Nuxt 3 各種原理,深入了解 Nuxt 3 的核心概念。在這30天當中將會一步步建立 Nuxt 3 專案,並介紹專案結構、元件、路由、狀態管理等 Nuxt 3 各項功能,此外,還會示範 Nuxt 3 好用的模組及 Unocss,幫助你快速開發及美化網站無論你是 Vue 的新手還是老手,只要你有一些 HTML、CSS 和 JavaScript 的基礎知識,就可以跟著這個系列文章一起學習 Nuxt 3 的魅力。讓我們一起開始吧!
Nuxt vs Vue Vue 是一個用於構建客戶端應用程式的框架,預設情況下 Vue 組件將以客戶端渲染 (Client Side Rendering,簡稱...
Day2 – Nuxt 3 核心功能概念(上) 正式進入專案與實作之前,先來了解幾個關於 Nuxt 3 的核心功能概念。 Auto-imports Nuxt 3...
今天將繼續介紹 Nuxt 3 的核心功能概念,若還沒讀過 Day 2 – Nuxt 3 核心功能概念(上) 的朋友們也別忘了在實作前先認識這些重要的概念! Se...
今天將開始建置專案並說明相關指令,若還沒讀過 Day2 – Nuxt 3 核心功能概念(上)、Day3 – Nuxt 3 核心功能概念(下)的朋友們也別忘了在實...
今天我們將介紹 Nuxt 3 專案的目錄結構。如果你還沒有建立 Nuxt 3 專案,可以參考 Day 4 – 建立第一個 Nuxt 3 專案 會一步步帶領你建立...
Composables 是 Vue 3 Composition API 的重要概念,將共用的有狀態邏輯(stateful logic)寫成一個可重用的函式以提高...
除了昨天提到 Nuxt 3 Composables 有許多共用的函式,在 utils/ 也會存放輔助函式和其他通用工具,同樣透過自動導入功能,整個專案中都能更方...
熟悉 Vue 的朋友對於 Components(元件)想必都不陌生,它是 Vue 中的一個重要概念和核心功能,將網頁元素拆分成多個獨立的小部分,再利用這些元件來...
Day 9 – Nuxt 3 Components <ClientOnly> Nuxt 3 提供了一個名為 <ClientOnly> 的...
在 Nuxt 3 中一旦新增 pages/ 資料夾,裡面的檔案會自動對應路由(自動整合 vue-router),省去繁雜的設定讓開發過程更加直觀有效率。 如何使...