本篇文章同步發表於 2023 iThome 鐵人賽:Nuxt.js 3.x 筆記-打造 SSR 專案
Nuxt3 提供兩個資料夾 assets/
以及 public/
,用來管理靜態資源,像是圖片、CSS 樣式、字體、icon 等,接下來說明兩個目錄適合存放的檔案類型與使用方式
本篇文章同步發表於 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 預設錯誤畫面如下:
本篇文章同步發表於 2023 iThome 鐵人賽:Nuxt.js 3.x 筆記-打造 SSR 專案
Middleware 為 Nuxt 內的 路由守衛(Navigation Guards),相當於 Vue Router 內的 beforeEach callback,協助我們在進到頁面前進行事件處理(例如權限檢查)
middleware/
定義,並在需要的頁面引入.global
後綴,在所有頁面切換時自動執行本篇文章同步發表於 2023 iThome 鐵人賽:Nuxt.js 3.x 筆記-打造 SSR 專案
Nuxt3 搭配了新的伺服器引擎 Nitro,讓我們能輕鬆在 Nuxt 專內建立 Server API。Nitro 的優點包含跨平台支援 Node.js 與瀏覽器、支援 HMR、自動生成 API 路由等,讓 Nuxt 具備全端功能,接下來一起進行實作吧。
server/
目錄建立 API,Nuxt 會依據資料夾結構自動生成 API 路徑defineEventHandler()
建立事件處理器本篇文章同步發表於 2023 iThome 鐵人賽:Nuxt.js 3.x 筆記-打造 SSR 專案
Layouts 資料夾協助我們定義共用模板,將重複使用的版面提取到模板內全域共用,看起來跟 Components 有點像,那麼 Layouts 跟 Components 怎麼區分?可以將 Layouts 視為包覆在頁面外層的包裹元件,用來定義 Header、Sidebar、Footer 等共用版面或是元件
官方文件提到,如果整個專案只有一個模板,建議直接在
app.vue
定義即可
本篇文章同步發表於 2023 iThome 鐵人賽:Nuxt.js 3.x 筆記-打造 SSR 專案
@nuxtjs/i18n 版本:v8.0.0-rc.3
多國語系讓我們的網站邁向國際市場,本篇將說明如何搭配 Nuxt3 整合模組 @nuxtjs/i18n 進行開發
本篇文章同步發表於 2023 iThome 鐵人賽:Nuxt.js 3.x 筆記-打造 SSR 專案
Bootstrap 版本:v5.3.1
Sass 版本:v1.63.6
在 Nuxt 專案中,我們可以自由選擇 CSS 預處理器、CSS 框架或是 UI Library 來定義樣式。在 CSS 框架百家爭鳴的時代,這幾年熱門的 Tailwind CSS、基於 Vue.js 開發的 Quasar、或是搭配 Vue3 開發的 Element Plus 都能快速上手,協助我們打造精美的網站。
由於工作上較常使用 Bootstrap 協作,本篇將以 Bootstrap 5 搭配 SCSS 進行說明。
本篇文章同步發表於 2023 iThome 鐵人賽:Nuxt.js 3.x 筆記-打造 SSR 專案
Nuxt3 提供了預設進度條元件 <NuxtLoadingIndicator>
,在路徑切換時顯示。也可以自訂共用元件來調整觸發時機或樣式。
了解 Nuxt.js 之前,需先從 Vue.js 說起。Vue.js 是一個專注於視圖層的 JavaScript 框架,用於建立單頁應用程式(SPA,Single Page Application)。在 SPA 架構中,使用者首次訪問網站時會下載一個 HTML 文件和所有的 JavaScript 資源,之後的頁面切換和更新都是透過 JavaScript 動態完成,這樣的設計可以減少頁面重新載入的次數,進而提升使用者體驗。
不過,SPA 架構也存在一個主要缺點:搜尋引擎爬蟲只會讀取 HTML,不會執行 JavaScript。因此,可能會導致動態產生的內容無法被正確索引,影響網站在搜尋引擎上的表現。
Nuxt.js 是基於 Vue.js 的框架,預設使用通用渲染模式(Universal Rendering),結合了伺服器端渲染(SSR,Server-Side Rendering)和客戶端渲染(CSR,Client-Side Rendering)的優點。透過在伺服器端生成完整的 HTML 內容並回傳給瀏覽器,讓搜尋引擎爬蟲可以取得較完整的 HTML 內容,以改善 SPA 架構下 SEO 成效不佳的問題。
Update your browser to view this website correctly. Update my browser now