Nuxt | 一個框架的框架

阿榮-avatar-img
阿榮
發佈於前端
更新於 發佈於 閱讀時間約 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 和元件等都不用自己手動引入了！


學到什麼再繼續補充 🤩


參考資料

阿榮 | 前端 ~ 互動藝術程式前端
留言
avatar-img
留言分享你的想法！
avatar-img
阿榮 | 前端 ~ 互動藝術程式
2會員
39內容數
主要放程式學習筆記，分享 Creative Coding 相關內容、作品
阿榮 | 前端 ~ 互動藝術程式的其他內容
2025/04/13
什麼是 router？
2025/04/13
什麼是 router？
2024/04/19
[ CSS ] 什麼是 CSS Reset？
避免網頁在不同瀏覽器中長不一樣。用 CSS Reset 來「重置」和統一瀏覽器預設樣式。
Thumbnail
2024/04/19
[ CSS ] 什麼是 CSS Reset？
避免網頁在不同瀏覽器中長不一樣。用 CSS Reset 來「重置」和統一瀏覽器預設樣式。
Thumbnail
2024/04/15
var、let 與 const 的差異 | JavaScript
var let const 的差異
Thumbnail
2024/04/15
var、let 與 const 的差異 | JavaScript
var let const 的差異
Thumbnail
看更多
你可能也想看
Thumbnail
avatar-avatar
方格子 vocus 官方沙龍
沙龍介面新登場！自訂你的創作空間，讓好內容被看見
沙龍一直是創作與交流的重要空間，這次 vocus 全面改版了沙龍介面，就是為了讓好內容被好好看見！ 你可以自由編排你的沙龍首頁版位，新版手機介面也讓每位訪客都能更快找到感興趣的內容、成為你的支持者。 改版完成後可以在社群媒體分享新版面，並標記 @vocus.official⁠ ♥️ ⁠
#vocus#方格子#方格子沙龍
Thumbnail
avatar-avatar
方格子 vocus 官方沙龍
沙龍介面新登場！自訂你的創作空間，讓好內容被看見
沙龍一直是創作與交流的重要空間，這次 vocus 全面改版了沙龍介面，就是為了讓好內容被好好看見！ 你可以自由編排你的沙龍首頁版位，新版手機介面也讓每位訪客都能更快找到感興趣的內容、成為你的支持者。 改版完成後可以在社群媒體分享新版面，並標記 @vocus.official⁠ ♥️ ⁠
#vocus#方格子#方格子沙龍
Thumbnail
avatar-avatar
阿千看世界
2025年綜合所得稅繳稅教學：線上申報、信用卡回饋、拆單攻略！
每年4月、5月都是最多稅要繳的月份，當然大部份的人都是有機會繳到「綜合所得稅」，只是相當相當多人還不知道，原來繳給政府的稅！可以透過一些有活動的銀行信用卡或電子支付來繳，從繳費中賺一點點小確幸！就是賺個１%~2%大家也是很開心的，因為你們把沒回饋變成有回饋，就是用卡的最高境界 所得稅線上申報
#2025所得稅#綜合所得稅#繳稅有回饋
Thumbnail
avatar-avatar
阿千看世界
2025年綜合所得稅繳稅教學：線上申報、信用卡回饋、拆單攻略！
每年4月、5月都是最多稅要繳的月份，當然大部份的人都是有機會繳到「綜合所得稅」，只是相當相當多人還不知道，原來繳給政府的稅！可以透過一些有活動的銀行信用卡或電子支付來繳，從繳費中賺一點點小確幸！就是賺個１%~2%大家也是很開心的，因為你們把沒回饋變成有回饋，就是用卡的最高境界 所得稅線上申報
#2025所得稅#綜合所得稅#繳稅有回饋
Thumbnail
avatar-avatar
鱈魚的魚缸
所以我說那個型別呢？來一個有形別提示的 Vue h function 吧！(/≧▽≦)/
先前提到 Quasar 的 Dialog Plugin 很好用，再讓我補充一個用法。
#Vue#Quasar#前端
Thumbnail
avatar-avatar
鱈魚的魚缸
所以我說那個型別呢？來一個有形別提示的 Vue h function 吧！(/≧▽≦)/
先前提到 Quasar 的 Dialog Plugin 很好用，再讓我補充一個用法。
#Vue#Quasar#前端
Thumbnail
avatar-avatar
Cheng's
Vue 3 新世界 defineModel()，你值得更好的開發體驗
各位使用 Vue.js 開發的小夥伴們，你們都怎麼實作父子層組件資料的雙向綁定呢？如果你還在寫 prop + emit 的話，不妨進來看看吧。
#Vue#開發體驗#defineModel
Thumbnail
avatar-avatar
Cheng's
Vue 3 新世界 defineModel()，你值得更好的開發體驗
各位使用 Vue.js 開發的小夥伴們，你們都怎麼實作父子層組件資料的雙向綁定呢？如果你還在寫 prop + emit 的話，不妨進來看看吧。
#Vue#開發體驗#defineModel
Thumbnail
avatar-avatar
Joker Cat
2023 Vue直播班筆記 - 自訂義指令 directive
平常我們在 html 上常看到的例如 v-for、v-model 等等... 也是VUE已經幫我們定義好的指令，而這次我們可以依這自己的需求來建立。 此功能屬於較進階的功能，因此實戰中會比較少見，市面上還是有不少完善的套件能達到同樣效果，建議可以先往這方面察找
#六角學院#學習#Vue
Thumbnail
avatar-avatar
Joker Cat
2023 Vue直播班筆記 - 自訂義指令 directive
平常我們在 html 上常看到的例如 v-for、v-model 等等... 也是VUE已經幫我們定義好的指令，而這次我們可以依這自己的需求來建立。 此功能屬於較進階的功能，因此實戰中會比較少見，市面上還是有不少完善的套件能達到同樣效果，建議可以先往這方面察找
#六角學院#學習#Vue
Thumbnail
avatar-avatar
Joker Cat
2023 Vue直播班筆記 - Teleport自訂元件生成位置
自訂元件生成位置顧名思義就是可以指定部分HTML區塊渲染在特定的畫面上，即使在不同組件也能把A組件內的部分畫面，展現在B組件上，以下方程式舉例。
#六角學院#學習#前端
Thumbnail
avatar-avatar
Joker Cat
2023 Vue直播班筆記 - Teleport自訂元件生成位置
自訂元件生成位置顧名思義就是可以指定部分HTML區塊渲染在特定的畫面上，即使在不同組件也能把A組件內的部分畫面，展現在B組件上，以下方程式舉例。
#六角學院#學習#前端
Thumbnail
avatar-avatar
小黑與程式的邂逅
[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
Thumbnail
avatar-avatar
小黑與程式的邂逅
[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
Thumbnail
avatar-avatar
再寫5分鐘
軟體設計模式 | 模板模式 : 以Vue.js為例
樣板模式的定義極為簡單，卻是大型系統程式、WEB/APP應用框架的設計核心，完美展現設計模式的價值: 簡單、高效、強大。
#應用程式#測試#Android
Thumbnail
avatar-avatar
再寫5分鐘
軟體設計模式 | 模板模式 : 以Vue.js為例
樣板模式的定義極為簡單，卻是大型系統程式、WEB/APP應用框架的設計核心，完美展現設計模式的價值: 簡單、高效、強大。
#應用程式#測試#Android
Thumbnail
avatar-avatar
Joker Cat
2023 Vue直播班筆記 - Vue Router及具名視圖
Vue Router 及 具名視圖，擺脫以往切換依賴 CSS display:none 跟 display:block 互相配合，有時還得搭配 z-index 來調整層級跟 opacity 透明度的麻煩，而 Vue Router 完美的解決了這棘手的問題，且能客製頁面想要呈現的擺飾。
#六角學院#Vue#前端
Thumbnail
avatar-avatar
Joker Cat
2023 Vue直播班筆記 - Vue Router及具名視圖
Vue Router 及 具名視圖，擺脫以往切換依賴 CSS display:none 跟 display:block 互相配合，有時還得搭配 z-index 來調整層級跟 opacity 透明度的麻煩，而 Vue Router 完美的解決了這棘手的問題，且能客製頁面想要呈現的擺飾。
#六角學院#Vue#前端
Thumbnail
avatar-avatar
阿榮 | 前端 ~ 互動藝術程式
Nuxt 安裝流程
Nuxt 的安裝流程，一起來試試看吧
#程式#程式筆記#前端
Thumbnail
avatar-avatar
阿榮 | 前端 ~ 互動藝術程式
Nuxt 安裝流程
Nuxt 的安裝流程，一起來試試看吧
#程式#程式筆記#前端
Thumbnail
avatar-avatar
阿榮 | 前端 ~ 互動藝術程式
Nuxt | 一個框架的框架
對，沒錯。Nuxt 是一個框架 (Vue) 的框架。
#程式#程式筆記#前端
Thumbnail
avatar-avatar
阿榮 | 前端 ~ 互動藝術程式
Nuxt | 一個框架的框架
對，沒錯。Nuxt 是一個框架 (Vue) 的框架。
#程式#程式筆記#前端
Thumbnail
avatar-avatar
Tim Bai的沙龍
Vue2 及 Vue3 生命週期改變
前言 Vue 是一個現代開發框架，擁有完尚的生態系，讓我們可以將須多元件客製化，做出組件，並且可重複利用，高擴充性。在開發組件時，每個組件都擁有自己的生命周期，Vue 組件會偵測每個變數值，是否有變，並且更新內容，今天要一個一個了解 Vue 的生命週期，讓大家有更多認識。 Vue 的生命週期
#Vue3#javascript#科技力
Thumbnail
avatar-avatar
Tim Bai的沙龍
Vue2 及 Vue3 生命週期改變
前言 Vue 是一個現代開發框架，擁有完尚的生態系，讓我們可以將須多元件客製化，做出組件，並且可重複利用，高擴充性。在開發組件時，每個組件都擁有自己的生命周期，Vue 組件會偵測每個變數值，是否有變，並且更新內容，今天要一個一個了解 Vue 的生命週期，讓大家有更多認識。 Vue 的生命週期
#Vue3#javascript#科技力
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News