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

看更多

你可能也想看

方格子 vocus 官方沙龍

vocus App 正式推出｜立即下載 iOS 版，打開全新內容宇宙

在 vocus 與你一起探索內容、發掘靈感的路上，我們又將啟動新的冒險——vocus App 正式推出！現在起，你可以在 iOS App Store 下載全新上架的 vocus App。無論是在通勤路上、日常空檔，或一天結束後的放鬆時刻，都能自在沈浸在內容宇宙中。

#App#iOS#App Store

2026/01/21

方格子 vocus 官方沙龍

vocus App 正式推出｜立即下載 iOS 版，打開全新內容宇宙

#App#iOS#App Store

2026/01/21

方格子 vocus 官方沙龍

【 vocus 全站慶，更好的 2026 上線了！】折扣碼 x 抽紅包 x 新手禮 x App 登場！

vocus 慶祝推出 App，舉辦 2026 全站慶。推出精選內容與數位商品折扣，訂單免費與紅包抽獎、新註冊會員專屬活動、Boba Boost 贊助抽紅包，以及全站徵文，並邀請你一起來回顧過去的一年， vocus 與創作者共同留下了哪些精彩創作。

#vocus#2026#vocus2026

2026/01/26

方格子 vocus 官方沙龍

【 vocus 全站慶，更好的 2026 上線了！】折扣碼 x 抽紅包 x 新手禮 x App 登場！

#vocus#2026#vocus2026

2026/01/26

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，然後新增一

2023/02/17

2023/02/17

1. 安裝node.js 2. 建立專案: 接著會詢問一些初始化設定的東西，按照需求選擇即可: 3. 執行打開http://localhost:3000/ 即可看到畫面。 pages Nuxt.js會自動配置pages中每一個.vue檔案的route。假設在pages資料夾下新增一個如下內容的a

2023/02/17

2023/02/17

[2] Vue: getting started

前言 Vue 在過去的一兩年內快速發展，寫法也一直改變，我在過去一年多也更改了兩次寫法，在這個系列中我將以最新的 composition api + typescript 寫法進行教學。 javascript 有兩大痛點，一個是異步問題，另一個是弱型別。要渲染畫面一定要多線程同時異步處理，不然真的一

#網頁開發

2022/10/05