iT邦幫忙

鐵人檔案

2022 iThome 鐵人賽
回列表
Modern Web

Nuxt 3 學習筆記 系列

在使用 Vue 3 開發網站可能會面臨需要做 SEO 的情境,為了解決該情境問題,你可能會找到使用 Vite 做預渲染或其他方式,Nuxt 3 也是其中一個解決方案,且有更多強大的功能,目前 Nuxt 3 正在 RC 階段,但已經可開始嚐鮮踩雷,等穩定版正式發布後能更快地上手。
本系列會著重在 Nuxt 3 的特色與功能學習,所以你可能需具備些 Vue 3 基礎,我將從搭建 Nuxt 3 開發環境、頁面路由與佈局一直到使用 Nuxt 3 建立 SEO 所需的資訊做些筆記及介紹,讓你有個概念並嘗試用 Nuxt 3 來做 SSR 或 SSG,進而解決 Vue 3 SPA 不好做 SEO 的問題。

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

[Day 21] Nuxt 3 實作部落格 - 資料庫與會員系統

前言 大家經過Nuxt 3 學習筆記這一系列文章,應該對於 Nuxt 3 有初步的理解,接下來我們將進入實戰部分,我將會以 Nuxt 3 來實作部落格網站,讓已...

2022-10-06 ‧ 由 Ryan 分享
DAY 22

[Day 22] Nuxt 3 實作部落格 - 導覽列模板與新增文章

前言 上一篇,我們完成了基本的會員登入,接下來將進入網站的切版,這篇文章會使用布局模板來實現,上方導覽列與下方顯示網站內容的排版方式,接下來就會快速的進入到新增...

2022-10-07 ‧ 由 Ryan 分享
DAY 23

[Day 23] Nuxt 3 實作部落格 - 頁面的導航守衛與切換效果

前言 前一篇,我們完成了新增文章的頁面與流程,在網站開發的過程中,有些頁面是具有瀏覽的限制,例如,我們不希望一般的使用者能進到管理者頁面專用的頁面進行操作,這時...

2022-10-08 ‧ 由 Ryan 分享
DAY 24

[Day 24] Nuxt 3 搜尋引擎最佳化 (SEO) 與 HTML Meta Tag

前言 選擇使用 Nuxt 3 作為網站開發框架的開發者,多數都是為了要使用 SSR 或 SSG 來加強對 SEO 的優化設置,這篇將會講述 Nuxt 提供的幾個...

2022-10-09 ‧ 由 Ryan 分享
DAY 25

[Day 25] Nuxt 3 邁向國際化 - 使用 Nuxt I18n 實作多國語系

前言 當一個網站需要面向不同國家或不同語言的使用者,我們就需要做國際化 (Internationalization),將網站內容進行翻譯或語言的對應,讓使用者能...

2022-10-10 ‧ 由 Ryan 分享
DAY 26

[Day 26] Nuxt 3 Public 與 Assets 資源目錄

前言 在網站的開發過程中,多少會使用到圖片、樣式或設定字體,而當這些檔案若沒有外部連結或某些需求下需要包含在專案內做使用,最後連帶這些檔案一起部署。在使用 cr...

2022-10-11 ‧ 由 Ryan 分享
DAY 27

[Day 27] Nuxt 3 測試 (Testing) 與錯誤處理 (Error handling)

前言 網站開發的過程或部署前若能結合測試將能大大的降低網站出錯的可能性,這篇文章因為官方的測試相關工具尚未完善,故主要針對錯誤處理做講解,處理錯誤固然重要,但能...

2022-10-12 ‧ 由 Ryan 分享
DAY 28

[Day 28] Nuxt 3 渲染模式 (Rendering modes) 與網站使用體驗核心指標 (Core Web Vitals)

前言 Nuxt 3 作為一個完整的全端框架,也兼具了開箱即用的特性,當你選擇 Nuxt 3 開發網站準備建構正式環境的專案時,可以根據使用方式與解決情境,選擇是...

2022-10-13 ‧ 由 Ryan 分享
DAY 29

[Day 29] Nuxt 3 發布網站前的建構打包 (Build) 與靜態網站生成 (Static Site Generation)

前言 當網站開發完成或有導入 CI/CD,在準備發布網站前,我們會將 Nuxt 網站的開發專案透過 Nuxt 提供的指令,我們可以來建構出正式環境所需要的版本,...

2022-10-14 ‧ 由 Ryan 分享
DAY 30

[Day 30] Nuxt 3 就剩最後一步了 - 部署 (Deployment)

前言 我們完成網站的開發與建構後,將會將網站部署至正式環境,前一篇我們介紹了建構與打包的相關指令與參數配置,這篇文章將舉幾個例子來實際部署我們的專案。 Nuxt...

2022-10-15 ‧ 由 Ryan 分享