iT邦幫忙

鐵人檔案

2023 iThome 鐵人賽
回列表
Vue.js

Nuxt.js 3.x 筆記-打造 SSR 專案 系列

Nuxt.js 是基於 Vue.js 的輕量框架,結合 SSR 及 SPA,在頁面載入前即渲染,解決 Vue.js SEO 成效不佳的問題。

Nuxt 3 在 2022 年底推出了穩定版本,除了支援 TypeScript,更徹底的進行重構,精簡了核心、編譯速度更快,提升開發體驗。

這次將從基礎專案建立開始說明,介紹主要架構與功能、套件應用,以及如何提升 SEO,將學習過程筆記起來,加深印象!

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

D1:Nuxt.js vs Vue.js,淺談 SPA 與 SSR

本篇文章同步更新於個人部落格,歡迎交流指教~謝謝您的閱讀 提到 Nuxt.js,必須先從 Vue.js 說起,Vue.js 為專注在視圖層(View)的...

2023-09-12 ‧ 由 claire chang 分享
DAY 2

D2:Nuxt 3.x 專案架設

本篇文章同步更新於個人部落格,歡迎交流指教~謝謝您的閱讀 Nuxt 版本:v3.7.1 在 Vue 3 出了好一段時間後,Nuxt 3 終於在 202...

2023-09-13 ‧ 由 claire chang 分享
DAY 3

D3:Nuxt 3.x 目錄結構 Directory Structure

本篇文章同步更新於個人部落格,歡迎交流指教~謝謝您的閱讀 Nuxt3 定義了完整的目錄規則,讓我們可以輕鬆配置功能,專注在開發上 透過 npx nuxi@l...

2023-09-14 ‧ 由 claire chang 分享
DAY 4

D4:Nuxt 3.x ESLint 程式碼規範與自動排版-搭配 TypeScript

本篇文章同步更新於個人部落格,歡迎交流指教~謝謝您的閱讀 Nuxt 3 完整支援 TypeScript 開發,TypeScript 相關設定在專案根目錄...

2023-09-15 ‧ 由 claire chang 分享
DAY 5

D5:Nuxt 3.x Stylelint SCSS 程式碼檢查與自動排版

本篇文章同步更新於個人部落格,歡迎交流指教~謝謝您的閱讀 前一天介紹了 Nuxt3 搭配 ESLint JavaScript 程式碼檢查工具:文章連結,本...

2023-09-16 ‧ 由 claire chang 分享
DAY 6

D6:Nuxt 3.x Pages 目錄-自動生成路由

本篇文章同步更新於個人部落格,歡迎交流指教~謝謝您的閱讀 Pages 資料夾用來新增頁面,當我們在 Pages 資料夾建立檔案,Nuxt 會根據資料夾以及檔...

2023-09-17 ‧ 由 claire chang 分享
DAY 7

D7:Nuxt 3.x Components 目錄-建立共用元件

本篇文章同步更新於個人部落格,歡迎交流指教~謝謝您的閱讀 Components 目錄用來定義 Vue 共用元件,元件的特性為將部分模板、程式碼進行封裝,讓我...

2023-09-18 ‧ 由 claire chang 分享
DAY 8

D8:Nuxt 3.x Layouts 目錄-自訂模板

本篇文章同步更新於個人部落格,歡迎交流指教~謝謝您的閱讀 Layouts 資料夾協助我們定義共用模板,將重複使用的版面提取到模板內全域共用,看起來跟昨天介紹...

2023-09-19 ‧ 由 claire chang 分享
DAY 9

D9:Nuxt 3.x Composables vs Utils 目錄-自訂共用方法

本篇文章同步更新於個人部落格,歡迎交流指教~謝謝您的閱讀 定義在 composables 以及 utils 資料夾的檔案 Nuxt 都會自動引入(auto-...

2023-09-20 ‧ 由 claire chang 分享
DAY 10

D10:Nuxt 3.x Plugins 目錄-搭配第三方套件

本篇文章同步更新於個人部落格,歡迎交流指教~謝謝您的閱讀 Plugins 目錄協助我們在 Nuxt 擴充套件功能。前端開發常會搭配 第三方套件(packag...

2023-09-21 ‧ 由 claire chang 分享