TypeScript extends
有三種用法,語義和應用場景上有所不同,因此筆記起來讓自己參考使用。
Extends 用法
- 介面繼承
- 泛型約束
- 條件判斷
Nuxt DevTools 是 Nuxt 團隊推出的視覺化開發工具,用來協助我們快速了解 Nuxt 專案的內容,近一步提升開發者體驗(DX,Developer Experience)。
關於開發者體驗(DX)介紹,這裡推薦一篇文章
Nuxt3 提供許多內建功能,例如:
這些功能是 DX 最直接具體的實踐,雖然能讓我們能輕鬆建立 Nuxt3 專案,但也會面臨「資訊透明度不足」的問題。抽象化設計是一把雙面刃,在化繁為簡、避免重工的同時,也會增加額外的學習負擔與除錯困難。
Nuxt DevTools 便是為了解決此問題而設計的視覺化工具,能夠提升 Nuxt 框架和應用程式的透明度、找到效能瓶頸,以及協助我們管理應用和配置。
本篇文章同步發表於 2023 iThome 鐵人賽:Nuxt.js 3.x 筆記-打造 SSR 專案
專案開發完成後,終於到最後一步「部署」,本篇將說明 Universal 專案部署到 Firebase。Universal 渲染模式需要伺服器才能運作,因此會搭配 Firebase Cloud Functions(Serverless)來協助處理 SSR 的部分。
Universal Rendering 相關說明可以參考 這篇文章
實作分為以下步驟:
本篇文章同步發表於 2023 iThome 鐵人賽:Nuxt.js 3.x 筆記-打造 SSR 專案
專案開發完成後,終於到最後一步「部署」,本篇使用靜態網站生成(SSG),搭配 GitHub Pages 託管靜態網頁內容。
在編譯時產生靜態 HTML 頁面。靜態部署適合內容固定、不需資料庫、不含伺服器端動態渲染的網站(例如公司形象網站或是個人部落格),雖然不像 Universal Rendering 一樣彈性,不過靜態網站很適合搭配 CDN 緩存。
本篇文章同步發表於 2023 iThome 鐵人賽:Nuxt.js 3.x 筆記-打造 SSR 專案
Nuxt3 搭配了新的伺服器引擎 Nitro,讓我們能輕鬆建立 Server API,並在 Nuxt3 專案內使用。Nitro 的優點包含跨平台支援 Node.js 與瀏覽器、支援 HMR、自動生成 API 路由等。
實務上 API 開發常會搭配資料庫連接,本篇將說明如何結合 MongoDB,實作後端 API 開發與前端串接,讓我們的 Nuxt 專案具備全端功能。
本文重點在 Nuxt 與 MongoDB 整合,需先具備以下知識:
本篇文章同步發表於 2023 iThome 鐵人賽:Nuxt.js 3.x 筆記-打造 SSR 專案
Sitemap 是一種用來提供網站資訊的檔案,記錄網站內的網頁、圖片等,主要功用為協助搜尋引擎快速了解我們的網頁。
新網站上線後,雖然搜尋引擎爬蟲會自動讀取網站內容並收錄,不過當網站規模較大、架構較複雜、彼此間連結性較低,可能需要花較長的時間才能完整收錄,透過 Sitemap,直接告訴搜尋引擎網頁資訊,能有效加快網頁收錄的速度。
接下來說明如何在 Nuxt3 專案內加入 Sitemap 網站地圖:
本篇文章同步發表於 2023 iThome 鐵人賽:Nuxt.js 3.x 筆記-打造 SSR 專案
Nuxt3 提供兩個資料夾 assets/
以及 public/
,用來管理靜態資源,像是圖片、CSS 樣式、字體、icon 等,接下來說明兩個目錄適合存放的檔案類型與使用方式
本篇文章同步發表於 2023 iThome 鐵人賽:Nuxt.js 3.x 筆記-打造 SSR 專案
Components 目錄用來定義 Vue 共用元件,元件的特性為將部分模板、程式碼進行封裝,讓我們可以重複使用。在 Components 建立的檔案,Nuxt 會自動引入(auto-import),接著在整個專案 pages / components / layouts 都能搭配使用
|
本篇文章同步發表於 2023 iThome 鐵人賽:Nuxt.js 3.x 筆記-打造 SSR 專案
Nuxt 3 提供大量內建功能,包括預設錯誤頁面,可以在隱藏資料夾 .nuxt/dev/index.mjs
看到,我們也可以自訂錯誤頁面,Nuxt 預設錯誤畫面如下:
Update your browser to view this website correctly. Update my browser now