Nuxt 3 安裝與入門

2025/02/16 更新2023/02/17 發佈閱讀 2 分鐘

安裝Node.js
使用nuxi建立nuxt 3 專案:

$ npx nuxi init hello_nuxt_3

3. 進入專案目錄後，安裝相關套件:

$ npm install

4. 啟動nuxt:

$ npm run dev

跟Nuxt 2用法一樣，新增一個元件放到components資料夾中，可以直接引用:

pages用法也一樣，這邊把app.vue改放到pages下，改成index.vue，然後新增一個test page:

nuxt.config.ts:

其中紅框的部分是import global local js的方法，這邊無法像global css那樣使用@，綠框vite的部分則是Enable hot reload:

本筆記參考:

#Nuxt

#Nuxt3

留言

留言分享你的想法！

Vic Lin的沙龍

20會員

161內容數

Vic Lin的沙龍的其他內容

2023/08/13

Vue 3.2 defineEmits 用法

父元件傳遞方法使用@ <template> ... <Login @modalClose="modalClose"/> ... </template> <script setup> const _modal = ref(); function m

2023/08/13

Vue 3.2 defineEmits 用法

父元件傳遞方法使用@ <template> ... <Login @modalClose="modalClose"/> ... </template> <script setup> const _modal = ref(); function m

2023/03/25

ASRock AMD DeskMini X300 超高CP自組筆記

前情提要由於我的筆電已經用了10年，無法再戰下去了，且有預算考量，加上使用電腦幾乎都是定點，只有偶爾回家的時候會需要攜帶，因此最終選擇了迷你電腦，體積小不占空間，又方便攜帶，剛好符合我的需求。菜單由於這台無法裝獨顯，所以CPU的部分選擇 AMD R5 3400G(含Vega 11內

2023/03/25

ASRock AMD DeskMini X300 超高CP自組筆記

2023/03/10

Nuxt3 使用 useFetch 取得數據

Nuxt3中可使用useFetch來獲取數據，不須再引用axios，相當方便: 本筆記參考: https://juejin.cn/post/7104071421160063012 https://juejin.cn/post/7086472647575339045

2023/03/10

Nuxt3 使用 useFetch 取得數據

Nuxt3中可使用useFetch來獲取數據，不須再引用axios，相當方便: 本筆記參考: https://juejin.cn/post/7104071421160063012 https://juejin.cn/post/7086472647575339045

看更多

你可能也想看

夢夢 🍰 甜點魔法

全家限定！療癒系馬來貘雪糕，創意吃法大公開｜豆漿燕麥碗、藍莓果昔

還在煩惱平凡日常該如何增添一點小驚喜嗎？全家便利商店這次聯手超萌的馬來貘，推出黑白配色的馬來貘雪糕，不僅外觀吸睛，層次豐富的雙層口味更是讓人一口接一口！本文將帶你探索馬來貘雪糕的多種創意吃法，從簡單的豆漿燕麥碗、藍莓果昔，到大人系的奇亞籽布丁下午茶，讓可愛的馬來貘陪你度過每一餐，增添生活中的小確幸！

#懶人料理#食譜#健康甜點

2025/10/15

夢夢 🍰 甜點魔法

全家限定！療癒系馬來貘雪糕，創意吃法大公開｜豆漿燕麥碗、藍莓果昔

2025/10/15

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

2024/03/15

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

2024/03/15

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

#程式#程式筆記#前端

2024/03/15

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

Nuxt | 一個框架的框架

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

2024/03/15

Vue 筆記，Nuxt 簡介

2023/11/21

Vue 筆記，Nuxt 簡介

2023/11/21

Vue3 學習筆記，專案建立與基礎響應式篇

#WebDev#Vue

2023/11/05

Jeremy Ho的沙龍

Vue3 筆記 | 專案建立與響應式

Vue3 學習筆記，專案建立與基礎響應式篇

#WebDev#Vue

2023/11/05

Vic Lin的沙龍

Nuxt 3 動態路由

比如點了商品詳細資料，會導到商品詳細資料頁面並帶上id，或者點了商品分類，將類別id帶過去抓出該類別的商品資料等等。巢狀路由用法: 同一層page帶動態參數用法: 跳轉頁面可直接使用nuxt-link 若是要用類似v-to的用法來存取v-for的變數，要用:to 本筆記參考: https://it

2023/03/10

2023/03/10

安裝Node.js 使用nuxi建立nuxt 3 專案: 3. 進入專案目錄後，安裝相關套件: 4. 啟動nuxt: 跟Nuxt 2用法一樣，新增一個元件放到components資料夾中，可以直接引用: pages用法也一樣，這邊把app.vue改放到pages下，改成index.vue，然後新增一

#Nuxt#Nuxt3

2023/02/17