為什麼需要 Nuxt DevTools?

Nuxt DevTools 是 Nuxt 團隊推出的視覺化開發工具,用來協助我們快速了解 Nuxt 專案的內容,近一步提升開發者體驗(DX,Developer Experience)。

關於開發者體驗(DX)介紹,這裡推薦一篇文章

Nuxt3 提供許多內建功能,例如:

  • 預設使用 Vite 打包工具,支援 hot module replacement(HMR)
  • 引入伺服器引擎 Nitro,讓我們可以將應用程式部署到 Vercel、Netlify、Cloudflare 等託管服務
  • 許多內建功能,像是支援 TypeScript、各種組合式函式、SEO 搜尋引擎優化輔助函式等
  • auto-imports 自動引入功能
  • 依據檔案結構自動生成路由與 API 路徑
  • 提供許多模組,讓開發者可以快速整合所需的功能,不需另外進行配置

這些功能是 DX 最直接具體的實踐,雖然能讓我們能輕鬆建立 Nuxt3 專案,但也會面臨「資訊透明度不足」的問題。抽象化設計是一把雙面刃,在化繁為簡、避免重工的同時,也會增加額外的學習負擔與除錯困難。

Nuxt DevTools 便是為了解決此問題而設計的視覺化工具,能夠提升 Nuxt 框架和應用程式的透明度、找到效能瓶頸,以及協助我們管理應用和配置。

閱讀更多

本篇文章同步發表於 2023 iThome 鐵人賽:Nuxt.js 3.x 筆記-打造 SSR 專案

專案開發完成後,終於到最後一步「部署」,本篇將說明 Universal 專案部署到 Firebase。Universal 渲染模式需要伺服器才能運作,因此會搭配 Firebase Cloud Functions(Serverless)來協助處理 SSR 的部分。

Universal Rendering 相關說明可以參考 這篇文章

實作分為以下步驟:

  • 申請 Firebase Project
  • 透過 CLI 部署至 Firebase

閱讀更多

本篇文章同步發表於 2023 iThome 鐵人賽:Nuxt.js 3.x 筆記-打造 SSR 專案

專案開發完成後,終於到最後一步「部署」,本篇使用靜態網站生成(SSG),搭配 GitHub Pages 託管靜態網頁內容。

Static Site Generation(SSG)靜態網站生成

在編譯時產生靜態 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 整合,需先具備以下知識:

  • Nuxt Server API,可以參考 這篇文章
  • Nuxt $fetch 方法,可以參考 這篇文章
  • MongoDB 應用(本文僅簡單說明)

閱讀更多

本篇文章同步發表於 2023 iThome 鐵人賽:Nuxt.js 3.x 筆記-打造 SSR 專案

Sitemap 是一種用來提供網站資訊的檔案,記錄網站內的網頁、圖片等,主要功用為協助搜尋引擎快速了解我們的網頁

新網站上線後,雖然搜尋引擎爬蟲會自動讀取網站內容並收錄,不過當網站規模較大、架構較複雜、彼此間連結性較低,可能需要花較長的時間才能完整收錄,透過 Sitemap,直接告訴搜尋引擎網頁資訊,能有效加快網頁收錄的速度。

接下來說明如何在 Nuxt3 專案內加入 Sitemap 網站地圖:

閱讀更多

本篇文章同步發表於 2023 iThome 鐵人賽:Nuxt.js 3.x 筆記-打造 SSR 專案

Components 目錄用來定義 Vue 共用元件,元件的特性為將部分模板、程式碼進行封裝,讓我們可以重複使用。在 Components 建立的檔案,Nuxt 會自動引入(auto-import),接著在整個專案 pages / components / layouts 都能搭配使用

建立元件

components/
|—— TheHeader.vue
|—— TheFooter.vue

閱讀更多

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×