iT邦幫忙

鐵人檔案

2022 iThome 鐵人賽
回列表
Modern Web

Nuxt 3 - 因為還不穩定,所以來踩地雷 系列

習慣 Vue 3 的寫法之後,就想嘗試使用 Nuxt 3 來處理 SSR(其實也可以用 Vite),但是 Nuxt 3 目前仍在 RC 版本,拿來正式專案上使用會有不小風險,利用這 30 天簡單的了解 Nuxt 3 使用方式,等穩定正式版上線後就能快速上手。

鐵人鍊成 | 共 30 篇文章 | 17 人訂閱 訂閱系列文 RSS系列文
DAY 1

[Day 1] Nuxt3 - 建置專案

基礎知識 Nuxt3 是基於 Vue3,兼具前後端環境的 Framework,因為有後端,所以可以使用 SSR 來優化網站的 SEO,本系列文章會針對 Nuxt...

2022-09-16 ‧ 由 Genos 分享
DAY 2

[Day 2] 認識 Nuxt3 專案結構 - Pages

前言 第一天的文章裡,我們建置了陽春的專案,初始狀態下只有一些套件的設定檔,沒有其他的資料夾,也許會疑惑「接下來呢?自由發揮嗎?」不用擔心,在官方文件的的 Di...

2022-09-17 ‧ 由 Genos 分享
DAY 3

[Day 3] 認識 Nuxt3 專案結構 - Pages (續)

Day2 介紹了最基本的路由配置,今天會接續介紹其他的操作運用。 404 在 vue-router 中要設置 404 的頁面需要在所有定義好的路由最後捕捉所有的...

2022-09-18 ‧ 由 Genos 分享
DAY 4

[Day 4] 認識 Nuxt3 專案結構 - layouts

多頁面網站通常會有一些重複區塊(header、footer...),Vue3 需要在 vue-router 中撰寫 children 來套版,而 Nuxt3 只...

2022-09-19 ‧ 由 Genos 分享
DAY 5

[Day 5] 認識 Nuxt3 專案結構 - middleware

前幾天的文章說明了基本的路由和頁面搭配作法,在 vue-router 中還有生命週期的運用(可以參考 vue-router 官方文件 或是 Kuro大大 的 重...

2022-09-20 ‧ 由 Genos 分享
DAY 6

[Day 6] 認識 Nuxt3 專案結構 - 其他目錄介紹

開始今天的文章前,先提醒一下 Nuxt3 又更新了,來到了v3.0.0-rc.11。 前幾天已經介紹了 Nuxt3 中幾個重要的目錄結構,今天會簡單介紹完其他的...

2022-09-21 ‧ 由 Genos 分享
DAY 7

[Day 7] 認識 Nuxt3 環境配置 - SEO

SEO 基本設置就是 head 標籤裡的 meta 和 title,在 Nuxt3 中有兩種方式可以設定頁面的這些資訊 nuxt.config.ts 在環境配置...

2022-09-22 ‧ 由 Genos 分享
DAY 8

[Day 8] 認識 Nuxt3 環境配置 - nuxt.config

昨天介紹了 SEO 資訊的配置方式,今天來介紹 Nuxt3 的 config 檔還有哪些設定可以使用。 alias Vue 需要額外設定的路徑簡寫在 Nuxt...

2022-09-23 ‧ 由 Genos 分享
DAY 9

[Day 9] Nuxt3 x 其他套件 - Pinia & vue-i18n

Pinia Nuxt3 雖然可以使用 useStore 方法來操作 vuex,但是既然都是基於 Vue3 了,使用 pinia 來管理比較順手一點,雖然 Pin...

2022-09-24 ‧ 由 Genos 分享
DAY 10

[Day 10] Nuxt3 x 其他套件 - CSS 框架 與 Gtag

本次系列文 CSS 框架會介紹 tailwind 和私心推薦的 unocss,unocss 的相關文章目前還不多,等鐵人賽完成後會再找時間撰寫教學文章(其實使用...

2022-09-25 ‧ 由 Genos 分享