Nuxt | 一個框架的框架

更新於 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 和元件等都不用自己手動引入了!


學到什麼再繼續補充 🤩


參考資料

主要放程式學習筆記,分享 Creative Coding 相關內容、作品
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
你可能也想看
Google News 追蹤
Thumbnail
*合作聲明與警語: 本文係由國泰世華銀行邀稿。 證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務,定期定額(股)服務由國泰綜合證券提供。   剛出社會的時候,很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天,都會聽到各種市場動態、理財話題,像是:聯準會降息或是近期哪些科
Thumbnail
env 環境變數的設定,通常是為為了 server 而設定的,能快速的切換狀態,但現在的網頁開始,前端的範圍逐漸往後端靠近,所以在設定,也會有 client 的變數會想要在 .env 的情況。此篇就是以 nuxt 為實作,分享此內容 前端架構 最常見的 front 架構,就是把專案 buil
Thumbnail
不管是投資、創業、工作、運動等等 建立一個好的系統和框架對於各個領域的成功都是非常重要的。以下是一些常見的領域,以及在每個領域中建立良好系統和框架的重要性: 投資:在投資方面,建立一個有效的投資系統和框架可以幫助您做出明智的投資決策。這可能包括定義投資目標、制定風險管理策略、進行基本面和技術分析
Thumbnail
前言 近期用 Nuxt3 開發內嵌於 iOS、Android App 的網頁,並且要支援到 iOS13 版本。 測試時發現 Nuxt3 在 iOS13 功能會無法正常執行,因此順手記錄這個踩坑過程…XD 第一坑 Nuxt3 Announcing Nuxt 3 officially suppo
Nuxt3中可使用useFetch來獲取數據,不須再引用axios,相當方便: 本筆記參考: https://juejin.cn/post/7104071421160063012 https://juejin.cn/post/7086472647575339045
Thumbnail
比如點了商品詳細資料,會導到商品詳細資料頁面並帶上id,或者點了商品分類,將類別id帶過去抓出該類別的商品資料等等。 巢狀路由用法: 同一層page帶動態參數用法: 跳轉頁面可直接使用nuxt-link 若是要用類似v-to的用法來存取v-for的變數,要用:to 本筆記參考: https://it
Thumbnail
安裝Node.js 使用nuxi建立nuxt 3 專案: 3. 進入專案目錄後,安裝相關套件: 4. 啟動nuxt: 跟Nuxt 2用法一樣,新增一個元件放到components資料夾中,可以直接引用: pages用法也一樣,這邊把app.vue改放到pages下,改成index.vue,然後新增一
Thumbnail
1. 安裝node.js 2. 建立專案: 接著會詢問一些初始化設定的東西,按照需求選擇即可: 3. 執行 打開http://localhost:3000/ 即可看到畫面。 pages Nuxt.js會自動配置pages中每一個.vue檔案的route。 假設在pages資料夾下新增一個如下內容的a
Thumbnail
『跳脫約定俗成的框架需要極大的勇氣,但在螫伏醞釀的過程裡,我們重新定義了自己。凝煉出堅定的價值觀、自己的優勢,與重新定義了世界對於成功的觀點。』 慢慢來,成為更好的自己。 繪本《帕容卡生了一個蛋》,在帕容卡與母雞們辯證的過程裡,教會我們的幾件事--
Thumbnail
Nuxt.js 是以 Vue 為基底所建構的框架,透過 Nuxt.js,我們能夠更輕鬆地開發靜態頁面 (Static Site)、操作體驗良好的單頁式網站 (SPA)、甚至是顧及 SEO 的伺服器端渲染 (SSR) 網站。
Thumbnail
*合作聲明與警語: 本文係由國泰世華銀行邀稿。 證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務,定期定額(股)服務由國泰綜合證券提供。   剛出社會的時候,很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天,都會聽到各種市場動態、理財話題,像是:聯準會降息或是近期哪些科
Thumbnail
env 環境變數的設定,通常是為為了 server 而設定的,能快速的切換狀態,但現在的網頁開始,前端的範圍逐漸往後端靠近,所以在設定,也會有 client 的變數會想要在 .env 的情況。此篇就是以 nuxt 為實作,分享此內容 前端架構 最常見的 front 架構,就是把專案 buil
Thumbnail
不管是投資、創業、工作、運動等等 建立一個好的系統和框架對於各個領域的成功都是非常重要的。以下是一些常見的領域,以及在每個領域中建立良好系統和框架的重要性: 投資:在投資方面,建立一個有效的投資系統和框架可以幫助您做出明智的投資決策。這可能包括定義投資目標、制定風險管理策略、進行基本面和技術分析
Thumbnail
前言 近期用 Nuxt3 開發內嵌於 iOS、Android App 的網頁,並且要支援到 iOS13 版本。 測試時發現 Nuxt3 在 iOS13 功能會無法正常執行,因此順手記錄這個踩坑過程…XD 第一坑 Nuxt3 Announcing Nuxt 3 officially suppo
Nuxt3中可使用useFetch來獲取數據,不須再引用axios,相當方便: 本筆記參考: https://juejin.cn/post/7104071421160063012 https://juejin.cn/post/7086472647575339045
Thumbnail
比如點了商品詳細資料,會導到商品詳細資料頁面並帶上id,或者點了商品分類,將類別id帶過去抓出該類別的商品資料等等。 巢狀路由用法: 同一層page帶動態參數用法: 跳轉頁面可直接使用nuxt-link 若是要用類似v-to的用法來存取v-for的變數,要用:to 本筆記參考: https://it
Thumbnail
安裝Node.js 使用nuxi建立nuxt 3 專案: 3. 進入專案目錄後,安裝相關套件: 4. 啟動nuxt: 跟Nuxt 2用法一樣,新增一個元件放到components資料夾中,可以直接引用: pages用法也一樣,這邊把app.vue改放到pages下,改成index.vue,然後新增一
Thumbnail
1. 安裝node.js 2. 建立專案: 接著會詢問一些初始化設定的東西,按照需求選擇即可: 3. 執行 打開http://localhost:3000/ 即可看到畫面。 pages Nuxt.js會自動配置pages中每一個.vue檔案的route。 假設在pages資料夾下新增一個如下內容的a
Thumbnail
『跳脫約定俗成的框架需要極大的勇氣,但在螫伏醞釀的過程裡,我們重新定義了自己。凝煉出堅定的價值觀、自己的優勢,與重新定義了世界對於成功的觀點。』 慢慢來,成為更好的自己。 繪本《帕容卡生了一個蛋》,在帕容卡與母雞們辯證的過程裡,教會我們的幾件事--
Thumbnail
Nuxt.js 是以 Vue 為基底所建構的框架,透過 Nuxt.js,我們能夠更輕鬆地開發靜態頁面 (Static Site)、操作體驗良好的單頁式網站 (SPA)、甚至是顧及 SEO 的伺服器端渲染 (SSR) 網站。