Vic Lin的沙龍

Nuxt 3 安裝與入門

維克 (Vic Lin)-avatar-img
維克 (Vic Lin)
更新 發佈閱讀 2 分鐘
  1. 安裝Node.js
  2. 使用nuxi建立nuxt 3 專案:
$ npx nuxi init hello_nuxt_3
raw-image

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

$ npm install
raw-image

4. 啟動nuxt:

$ npm run dev
raw-image
raw-image
  • 跟Nuxt 2用法一樣，新增一個元件放到components資料夾中，可以直接引用:
raw-image
raw-image
raw-image
  • pages用法也一樣，這邊把app.vue改放到pages下，改成index.vue，然後新增一個test page:
raw-image
raw-image
  • nuxt.config.ts:

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

raw-image



本筆記參考:

  1. https://nuxt.com/docs/getting-started/installation
  2. https://ithelp.ithome.com.tw/articles/10293273
  3. https://github.com/nuxt/nuxt/issues/12662


留言
avatar-img
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內
Thumbnail
2023/03/25
ASRock AMD DeskMini X300 超高CP自組筆記
前情提要 由於我的筆電已經用了10年，無法再戰下去了，且有預算考量，加上使用電腦幾乎都是定點，只有偶爾回家的時候會需要攜帶，因此最終選擇了迷你電腦，體積小不占空間，又方便攜帶，剛好符合我的需求。 菜單 由於這台無法裝獨顯，所以CPU的部分選擇 AMD R5 3400G(含Vega 11內
Thumbnail
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
看更多
你可能也想看
Thumbnail
avatar-avatar
釀電影，啜一口電影的美好。
《傳奇：帕拉贊諾夫的十段殘篇》：以流亡書寫帕拉贊諾夫的政治寓言
賽勒布倫尼科夫以流亡處境回望蘇聯電影導演帕拉贊諾夫的舞台作品，以十段寓言式殘篇，重新拼貼記憶、暴力與美學，並將審查、政治犯、戰爭陰影與「形式即政治」的劇場傳統推到台前。本文聚焦於《傳奇：帕拉贊諾夫的十段殘篇》的舞台美術、音樂與多重扮演策略，嘗試解析極權底下不可言說之事，將如何成為可被觀看的公共發聲。
#釀電影#釀評論#藝術評論
Thumbnail
avatar-avatar
釀電影，啜一口電影的美好。
《傳奇：帕拉贊諾夫的十段殘篇》：以流亡書寫帕拉贊諾夫的政治寓言
賽勒布倫尼科夫以流亡處境回望蘇聯電影導演帕拉贊諾夫的舞台作品，以十段寓言式殘篇，重新拼貼記憶、暴力與美學，並將審查、政治犯、戰爭陰影與「形式即政治」的劇場傳統推到台前。本文聚焦於《傳奇：帕拉贊諾夫的十段殘篇》的舞台美術、音樂與多重扮演策略，嘗試解析極權底下不可言說之事，將如何成為可被觀看的公共發聲。
#釀電影#釀評論#藝術評論
Thumbnail
avatar-avatar
趙鐸的沙龍
柏林劇團《三便士歌劇》：善讓人嚮往，惡卻更加迷人──布萊希特的疏離與慾望
柏林劇團在 2026 北藝嚴選，再次帶來由布萊希特改編的經典劇目《三便士歌劇》（The Threepenny Opera），導演巴里・柯斯基以舞台結構與舞台調度，重新向「疏離」進行提問。本文將從觀眾慾望作為戲劇內核，藉由沉浸與疏離的辯證，解析此作如何再次照見觀眾自身的位置。
#2026北藝嚴選#臺北表演藝術中心#北藝嚴選
Thumbnail
avatar-avatar
趙鐸的沙龍
柏林劇團《三便士歌劇》：善讓人嚮往，惡卻更加迷人──布萊希特的疏離與慾望
柏林劇團在 2026 北藝嚴選，再次帶來由布萊希特改編的經典劇目《三便士歌劇》（The Threepenny Opera），導演巴里・柯斯基以舞台結構與舞台調度，重新向「疏離」進行提問。本文將從觀眾慾望作為戲劇內核，藉由沉浸與疏離的辯證，解析此作如何再次照見觀眾自身的位置。
#2026北藝嚴選#臺北表演藝術中心#北藝嚴選
Thumbnail
avatar-avatar
花神沒有咖啡館的沙龍
《海妲．蓋柏樂》：晃晃跨幅町直球對決經典，解構現代女性的困頓與慾望
本文深入解析臺灣劇團「晃晃跨幅町」對易卜生經典劇作《海妲．蓋柏樂》的詮釋，從劇本歷史、聲響與舞臺設計，到演員的主體創作方法，探討此版本如何讓經典劇作在當代劇場語境下煥發新生，滿足現代觀眾的觀看慾望。
#2026北藝嚴選#北藝嚴選#臺北表演藝術中心
Thumbnail
avatar-avatar
花神沒有咖啡館的沙龍
《海妲．蓋柏樂》：晃晃跨幅町直球對決經典，解構現代女性的困頓與慾望
本文深入解析臺灣劇團「晃晃跨幅町」對易卜生經典劇作《海妲．蓋柏樂》的詮釋，從劇本歷史、聲響與舞臺設計，到演員的主體創作方法，探討此版本如何讓經典劇作在當代劇場語境下煥發新生，滿足現代觀眾的觀看慾望。
#2026北藝嚴選#北藝嚴選#臺北表演藝術中心
Thumbnail
avatar-avatar
涵柳的沙龍
《轉轉生 Re:INCARNATION》：從身體與服裝看見奈及利亞的重生
《轉轉生》為奈及利亞編舞家庫德斯．奧尼奎庫與 Q 舞團創作的當代舞蹈作品，融合舞蹈、音樂、時尚和視覺藝術，透過身體、服裝與群舞結構，回應殖民歷史、城市經驗與祖靈記憶的交錯。本文將從服裝設計、身體語彙與「輪迴」的「誕生—死亡—重生」結構出發，分析《轉轉生》如何以當代目光，形塑去殖民視角的奈及利亞歷史。
#2026北藝嚴選#北藝嚴選#臺北表演藝術中心
Thumbnail
avatar-avatar
涵柳的沙龍
《轉轉生 Re:INCARNATION》：從身體與服裝看見奈及利亞的重生
《轉轉生》為奈及利亞編舞家庫德斯．奧尼奎庫與 Q 舞團創作的當代舞蹈作品，融合舞蹈、音樂、時尚和視覺藝術，透過身體、服裝與群舞結構，回應殖民歷史、城市經驗與祖靈記憶的交錯。本文將從服裝設計、身體語彙與「輪迴」的「誕生—死亡—重生」結構出發，分析《轉轉生》如何以當代目光，形塑去殖民視角的奈及利亞歷史。
#2026北藝嚴選#北藝嚴選#臺北表演藝術中心
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
Jeremy Ho的沙龍
Vue3 筆記 | Nuxt
Vue 筆記，Nuxt 簡介
#Vue#Nuxt
Thumbnail
avatar-avatar
Jeremy Ho的沙龍
Vue3 筆記 | Nuxt
Vue 筆記，Nuxt 簡介
#Vue#Nuxt
Thumbnail
avatar-avatar
Jeremy Ho的沙龍
Vue3 筆記 | 專案建立與響應式
Vue3 學習筆記，專案建立與基礎響應式篇
#WebDev#Vue
Thumbnail
avatar-avatar
Jeremy Ho的沙龍
Vue3 筆記 | 專案建立與響應式
Vue3 學習筆記，專案建立與基礎響應式篇
#WebDev#Vue
Thumbnail
avatar-avatar
Vic Lin的沙龍
Nuxt 3 動態路由
比如點了商品詳細資料，會導到商品詳細資料頁面並帶上id，或者點了商品分類，將類別id帶過去抓出該類別的商品資料等等。 巢狀路由用法: 同一層page帶動態參數用法: 跳轉頁面可直接使用nuxt-link 若是要用類似v-to的用法來存取v-for的變數，要用:to 本筆記參考: https://it
#Nuxt#Nuxt3
Thumbnail
avatar-avatar
Vic Lin的沙龍
Nuxt 3 動態路由
比如點了商品詳細資料，會導到商品詳細資料頁面並帶上id，或者點了商品分類，將類別id帶過去抓出該類別的商品資料等等。 巢狀路由用法: 同一層page帶動態參數用法: 跳轉頁面可直接使用nuxt-link 若是要用類似v-to的用法來存取v-for的變數，要用:to 本筆記參考: https://it
#Nuxt#Nuxt3
Thumbnail
avatar-avatar
Vic Lin的沙龍
Nuxt 3 安裝與入門
安裝Node.js 使用nuxi建立nuxt 3 專案: 3. 進入專案目錄後，安裝相關套件: 4. 啟動nuxt: 跟Nuxt 2用法一樣，新增一個元件放到components資料夾中，可以直接引用: pages用法也一樣，這邊把app.vue改放到pages下，改成index.vue，然後新增一
#Nuxt#Nuxt3
Thumbnail
avatar-avatar
Vic Lin的沙龍
Nuxt 3 安裝與入門
安裝Node.js 使用nuxi建立nuxt 3 專案: 3. 進入專案目錄後，安裝相關套件: 4. 啟動nuxt: 跟Nuxt 2用法一樣，新增一個元件放到components資料夾中，可以直接引用: pages用法也一樣，這邊把app.vue改放到pages下，改成index.vue，然後新增一
#Nuxt#Nuxt3
Thumbnail
avatar-avatar
Vic Lin的沙龍
Nuxt.js 入門
1. 安裝node.js 2. 建立專案: 接著會詢問一些初始化設定的東西，按照需求選擇即可: 3. 執行 打開http://localhost:3000/ 即可看到畫面。 pages Nuxt.js會自動配置pages中每一個.vue檔案的route。 假設在pages資料夾下新增一個如下內容的a
#Nuxt
Thumbnail
avatar-avatar
Vic Lin的沙龍
Nuxt.js 入門
1. 安裝node.js 2. 建立專案: 接著會詢問一些初始化設定的東西，按照需求選擇即可: 3. 執行 打開http://localhost:3000/ 即可看到畫面。 pages Nuxt.js會自動配置pages中每一個.vue檔案的route。 假設在pages資料夾下新增一個如下內容的a
#Nuxt
Thumbnail
avatar-avatar
張哲嘉的沙龍
[2] Vue: getting started
前言 Vue 在過去的一兩年內快速發展，寫法也一直改變，我在過去一年多也更改了兩次寫法，在這個系列中我將以最新的 composition api + typescript 寫法進行教學。 javascript 有兩大痛點，一個是異步問題，另一個是弱型別。要渲染畫面一定要多線程同時異步處理，不然真的一
#網頁開發
Thumbnail
avatar-avatar
張哲嘉的沙龍
[2] Vue: getting started
前言 Vue 在過去的一兩年內快速發展，寫法也一直改變，我在過去一年多也更改了兩次寫法，在這個系列中我將以最新的 composition api + typescript 寫法進行教學。 javascript 有兩大痛點，一個是異步問題，另一個是弱型別。要渲染畫面一定要多線程同時異步處理，不然真的一
#網頁開發
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News