方格子 vocus

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

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

2026/03/24

方格子 vocus 官方沙龍

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

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

2026/03/24

方格子 vocus 官方沙龍

【野格團開箱｜下篇】新血全線集結！5 題靈魂拷問，解鎖「個人主題專家」的創作原力💫

看完上篇 4 位新成員的靈魂拷問，是不是意猶未盡？別急，野格團新血的驚喜正接著登場！今天下篇接力的另外 4 位「個人主題專家」，戰力同樣驚人──領域從旅行美食、運動、商業投資到自我成長；這些人如何維持長跑般的創作動力？在爆紅的文章背後，又藏著哪些不為人知的洞察？5 大靈魂拷問繼續出擊

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

2026/03/25

方格子 vocus 官方沙龍

【野格團開箱｜下篇】新血全線集結！5 題靈魂拷問，解鎖「個人主題專家」的創作原力💫

2026/03/25

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