方格子 vocus

自動化和慣例

Nuxt | 一個框架的框架

發佈於前端

2025/03/14 更新2024/03/15 發佈閱讀 1 分鐘

對，沒錯。Nuxt 是一個框架 (Vue) 的框架。

Vue 是 CSR (Client Side Rendering) 客戶端渲染，而 Nuxt 是 Universal Rendering，UR 結合了 SSR 和 CSR 的特點，最初會回傳已經渲染完畢的頁面外加 JS Bundle，一開始就具有完整的頁面內容有助於 SEO，瀏覽器載入頁面的速度也會比較快，等待時間越短，用戶越開心。再透過一個稱為 hydration 的過程將 vue 功能和互動性融入頁面中，這樣網頁又能同時具有 SPA (Single Page Application，單頁式應用) 的優點。

自動化和慣例

根據 pages/ 結構定義 route：不用自己手動設定路由了！

自動引入：ref、computed、composables 和元件等都不用自己手動引入了！

學到什麼再繼續補充 🤩

參考資料

Nuxt 3 Crash Course #1 - What is Nuxt?

阿榮 | 前端 ~ 互動藝術程式前端

留言

阿榮 | 前端 ~ 互動藝術程式

2會員

39內容數

主要放程式學習筆記，分享 Creative Coding 相關內容、作品

阿榮 | 前端 ~ 互動藝術程式的其他內容

2025/04/13

什麼是 router？

2025/04/13

什麼是 router？

2024/04/19

[ CSS ] 什麼是 CSS Reset？

避免網頁在不同瀏覽器中長不一樣。用 CSS Reset 來「重置」和統一瀏覽器預設樣式。

2024/04/19

[ CSS ] 什麼是 CSS Reset？

避免網頁在不同瀏覽器中長不一樣。用 CSS Reset 來「重置」和統一瀏覽器預設樣式。

2024/04/15

var、let 與 const 的差異 | JavaScript

var let const 的差異

2024/04/15

var、let 與 const 的差異 | JavaScript

var let const 的差異

你可能也想看

方格子 vocus 官方沙龍

新成員登場 ✨「野格團」持續召募中，歡迎加入創作的集體派對 .ᐟ.ᐟ.ᐟ

創作不只是個人戰，在 vocus ，也可以是一場集體冒險、組隊升級。最具代表性的創作者社群「vocus 野格團」，現在有了更強大的新夥伴加入！除了大家熟悉的「官方主題沙龍」，這次我們徵召了 8 位領域各異的「個人主題專家」，將再度嘗試創作的各種可能，和格友們激發出更多未知的火花。

#創作#創作者推薦#靈感

2026/03/24

方格子 vocus 官方沙龍

新成員登場 ✨「野格團」持續召募中，歡迎加入創作的集體派對 .ᐟ.ᐟ.ᐟ

創作不只是個人戰，在 vocus ，也可以是一場集體冒險、組隊升級。最具代表性的創作者社群「vocus 野格團」，現在有了更強大的新夥伴加入！除了大家熟悉的「官方主題沙龍」，這次我們徵召了 8 位領域各異的「個人主題專家」，將再度嘗試創作的各種可能，和格友們激發出更多未知的火花。

#創作#創作者推薦#靈感

2026/03/24

方格子 vocus 官方沙龍

【野格團開箱｜上篇】首波新成員登場！5 題靈魂拷問，直擊「個人主題專家」的創作後台🔥

vocus 最具指標性的創作者社群──「野格團」， 2026 年春季，這支充滿專業、熱情的團隊再次擴編，迎來了 8 位實力堅強的「個人主題專家」新成員 💫💫💫 從投資理財、自我成長、閱讀書評到電影戲劇，他們各自帶著獨特的「創作超能力」準備在格友大廳與大家見面。

#創作#創作者推薦#靈感

2026/03/25

方格子 vocus 官方沙龍

【野格團開箱｜上篇】首波新成員登場！5 題靈魂拷問，直擊「個人主題專家」的創作後台🔥

vocus 最具指標性的創作者社群──「野格團」， 2026 年春季，這支充滿專業、熱情的團隊再次擴編，迎來了 8 位實力堅強的「個人主題專家」新成員 💫💫💫 從投資理財、自我成長、閱讀書評到電影戲劇，他們各自帶著獨特的「創作超能力」準備在格友大廳與大家見面。

#創作#創作者推薦#靈感

2026/03/25

鱈魚的魚缸

所以我說那個型別呢？來一個有形別提示的 Vue h function 吧！(/≧▽≦)/

先前提到 Quasar 的 Dialog Plugin 很好用，再讓我補充一個用法。

#Vue#Quasar#前端

2024/07/25

鱈魚的魚缸

所以我說那個型別呢？來一個有形別提示的 Vue h function 吧！(/≧▽≦)/

先前提到 Quasar 的 Dialog Plugin 很好用，再讓我補充一個用法。

#Vue#Quasar#前端

2024/07/25

Vue 3 新世界 defineModel()，你值得更好的開發體驗

各位使用 Vue.js 開發的小夥伴們，你們都怎麼實作父子層組件資料的雙向綁定呢？如果你還在寫 prop + emit 的話，不妨進來看看吧。

#Vue#開發體驗#defineModel

2024/07/24

Vue 3 新世界 defineModel()，你值得更好的開發體驗

各位使用 Vue.js 開發的小夥伴們，你們都怎麼實作父子層組件資料的雙向綁定呢？如果你還在寫 prop + emit 的話，不妨進來看看吧。

#Vue#開發體驗#defineModel

2024/07/24

2023 Vue直播班筆記 - 自訂義指令 directive

平常我們在 html 上常看到的例如 v-for、v-model 等等... 也是VUE已經幫我們定義好的指令，而這次我們可以依這自己的需求來建立。此功能屬於較進階的功能，因此實戰中會比較少見，市面上還是有不少完善的套件能達到同樣效果，建議可以先往這方面察找

#六角學院#學習#Vue

2024/06/04

2023 Vue直播班筆記 - 自訂義指令 directive

平常我們在 html 上常看到的例如 v-for、v-model 等等... 也是VUE已經幫我們定義好的指令，而這次我們可以依這自己的需求來建立。此功能屬於較進階的功能，因此實戰中會比較少見，市面上還是有不少完善的套件能達到同樣效果，建議可以先往這方面察找

#六角學院#學習#Vue

2024/06/04

2023 Vue直播班筆記 - Teleport自訂元件生成位置

自訂元件生成位置顧名思義就是可以指定部分HTML區塊渲染在特定的畫面上，即使在不同組件也能把A組件內的部分畫面，展現在B組件上，以下方程式舉例。

#六角學院#學習#前端

2024/05/30

2023 Vue直播班筆記 - Teleport自訂元件生成位置

自訂元件生成位置顧名思義就是可以指定部分HTML區塊渲染在特定的畫面上，即使在不同組件也能把A組件內的部分畫面，展現在B組件上，以下方程式舉例。

#六角學院#學習#前端

2024/05/30

小黑與程式的邂逅

[Java Script]Vue.js

Vue.js是一種基於MVVM的前端JavaScript框架，類似的框架有React、Angular等。架設環境安裝Visual Studio Code(https://code.visualstudio.com/) 安裝Node.js(https://nodejs.org/en/

#JavaScript#VisualStudioCode#VueCLI

2024/05/29

小黑與程式的邂逅

[Java Script]Vue.js

Vue.js是一種基於MVVM的前端JavaScript框架，類似的框架有React、Angular等。架設環境安裝Visual Studio Code(https://code.visualstudio.com/) 安裝Node.js(https://nodejs.org/en/

#JavaScript#VisualStudioCode#VueCLI

2024/05/29

軟體設計模式 | 模板模式 : 以Vue.js為例

樣板模式的定義極為簡單，卻是大型系統程式、WEB/APP應用框架的設計核心，完美展現設計模式的價值: 簡單、高效、強大。

#應用程式#測試#Android

2024/05/28

軟體設計模式 | 模板模式 : 以Vue.js為例

樣板模式的定義極為簡單，卻是大型系統程式、WEB/APP應用框架的設計核心，完美展現設計模式的價值: 簡單、高效、強大。

#應用程式#測試#Android

2024/05/28

2023 Vue直播班筆記 - Vue Router及具名視圖

Vue Router 及具名視圖，擺脫以往切換依賴 CSS display:none 跟 display:block 互相配合，有時還得搭配 z-index 來調整層級跟 opacity 透明度的麻煩，而 Vue Router 完美的解決了這棘手的問題，且能客製頁面想要呈現的擺飾。

#六角學院#Vue#前端

2024/05/17

2023 Vue直播班筆記 - Vue Router及具名視圖

Vue Router 及具名視圖，擺脫以往切換依賴 CSS display:none 跟 display:block 互相配合，有時還得搭配 z-index 來調整層級跟 opacity 透明度的麻煩，而 Vue Router 完美的解決了這棘手的問題，且能客製頁面想要呈現的擺飾。

#六角學院#Vue#前端

2024/05/17

阿榮 | 前端 ~ 互動藝術程式

Nuxt 安裝流程

Nuxt 的安裝流程，一起來試試看吧

#程式#程式筆記#前端

2024/03/15

阿榮 | 前端 ~ 互動藝術程式

Nuxt 安裝流程

Nuxt 的安裝流程，一起來試試看吧

#程式#程式筆記#前端

2024/03/15

阿榮 | 前端 ~ 互動藝術程式

Nuxt | 一個框架的框架

對，沒錯。Nuxt 是一個框架 (Vue) 的框架。

#程式#程式筆記#前端

2024/03/15

阿榮 | 前端 ~ 互動藝術程式

Nuxt | 一個框架的框架

對，沒錯。Nuxt 是一個框架 (Vue) 的框架。

#程式#程式筆記#前端

2024/03/15

Tim Bai的沙龍

Vue2 及 Vue3 生命週期改變

前言 Vue 是一個現代開發框架，擁有完尚的生態系，讓我們可以將須多元件客製化，做出組件，並且可重複利用，高擴充性。在開發組件時，每個組件都擁有自己的生命周期，Vue 組件會偵測每個變數值，是否有變，並且更新內容，今天要一個一個了解 Vue 的生命週期，讓大家有更多認識。 Vue 的生命週期

#Vue3#javascript#科技力

2023/11/06

Tim Bai的沙龍

Vue2 及 Vue3 生命週期改變

前言 Vue 是一個現代開發框架，擁有完尚的生態系，讓我們可以將須多元件客製化，做出組件，並且可重複利用，高擴充性。在開發組件時，每個組件都擁有自己的生命周期，Vue 組件會偵測每個變數值，是否有變，並且更新內容，今天要一個一個了解 Vue 的生命週期，讓大家有更多認識。 Vue 的生命週期

#Vue3#javascript#科技力

2023/11/06

追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News