Nuxt3中可使用useFetch來獲取數據，不須再引用axios，相當方便:
<script setup>
import { ref } from 'vue';
const product = ref();
const { data: _product} = await useFetch("https://api_url...");
product.value = _product.value.data;
</script>
Nuxt3 使用 useFetch 取得數據
更新 發佈閱讀 1 分鐘
留言
Vic Lin的沙龍
20會員
161內容數
Vic Lin的沙龍的其他內容
2023/08/13
父元件
傳遞方法使用@
<template>
...
<Login @modalClose="modalClose"/>
...
</template>
<script setup>
const _modal = ref();
function m
2023/08/13
父元件
傳遞方法使用@
<template>
...
<Login @modalClose="modalClose"/>
...
</template>
<script setup>
const _modal = ref();
function m
2023/03/25
前情提要
由於我的筆電已經用了10年，無法再戰下去了，且有預算考量，加上使用電腦幾乎都是定點，只有偶爾回家的時候會需要攜帶，因此最終選擇了迷你電腦，體積小不占空間，又方便攜帶，剛好符合我的需求。
菜單
由於這台無法裝獨顯，所以CPU的部分選擇 AMD R5 3400G(含Vega 11內
2023/03/25
前情提要
由於我的筆電已經用了10年，無法再戰下去了，且有預算考量，加上使用電腦幾乎都是定點，只有偶爾回家的時候會需要攜帶，因此最終選擇了迷你電腦，體積小不占空間，又方便攜帶，剛好符合我的需求。
菜單
由於這台無法裝獨顯，所以CPU的部分選擇 AMD R5 3400G(含Vega 11內
2023/03/10
父元件
傳遞變數時須加上冒號
子元件
接收props用法如下
本筆記參考:
1. https://www.netlify.com/blog/understanding-defineprops-and-defineemits-in-vue-3.2
2. https://juejin.cn/post/7
2023/03/10
父元件
傳遞變數時須加上冒號
子元件
接收props用法如下
本筆記參考:
1. https://www.netlify.com/blog/understanding-defineprops-and-defineemits-in-vue-3.2
2. https://juejin.cn/post/7
你可能也想看
在 vocus 與你一起探索內容、發掘靈感的路上，我們又將啟動新的冒險——vocus App 正式推出！
現在起，你可以在 iOS App Store 下載全新上架的 vocus App。
無論是在通勤路上、日常空檔，或一天結束後的放鬆時刻，都能自在沈浸在內容宇宙中。
在 vocus 與你一起探索內容、發掘靈感的路上，我們又將啟動新的冒險——vocus App 正式推出！
現在起，你可以在 iOS App Store 下載全新上架的 vocus App。
無論是在通勤路上、日常空檔，或一天結束後的放鬆時刻，都能自在沈浸在內容宇宙中。
vocus 慶祝推出 App，舉辦 2026 全站慶。推出精選內容與數位商品折扣，訂單免費與紅包抽獎、新註冊會員專屬活動、Boba Boost 贊助抽紅包，以及全站徵文，並邀請你一起來回顧過去的一年， vocus 與創作者共同留下了哪些精彩創作。
vocus 慶祝推出 App，舉辦 2026 全站慶。推出精選內容與數位商品折扣，訂單免費與紅包抽獎、新註冊會員專屬活動、Boba Boost 贊助抽紅包，以及全站徵文，並邀請你一起來回顧過去的一年， vocus 與創作者共同留下了哪些精彩創作。
比如點了商品詳細資料，會導到商品詳細資料頁面並帶上id，或者點了商品分類，將類別id帶過去抓出該類別的商品資料等等。
巢狀路由用法:
同一層page帶動態參數用法:
跳轉頁面可直接使用nuxt-link
若是要用類似v-to的用法來存取v-for的變數，要用:to
本筆記參考:
https://it
比如點了商品詳細資料，會導到商品詳細資料頁面並帶上id，或者點了商品分類，將類別id帶過去抓出該類別的商品資料等等。
巢狀路由用法:
同一層page帶動態參數用法:
跳轉頁面可直接使用nuxt-link
若是要用類似v-to的用法來存取v-for的變數，要用:to
本筆記參考:
https://it
安裝Node.js
使用nuxi建立nuxt 3 專案:
3. 進入專案目錄後，安裝相關套件:
4. 啟動nuxt:
跟Nuxt 2用法一樣，新增一個元件放到components資料夾中，可以直接引用:
pages用法也一樣，這邊把app.vue改放到pages下，改成index.vue，然後新增一
安裝Node.js
使用nuxi建立nuxt 3 專案:
3. 進入專案目錄後，安裝相關套件:
4. 啟動nuxt:
跟Nuxt 2用法一樣，新增一個元件放到components資料夾中，可以直接引用:
pages用法也一樣，這邊把app.vue改放到pages下，改成index.vue，然後新增一
1. 安裝node.js
2. 建立專案:
接著會詢問一些初始化設定的東西，按照需求選擇即可:
3. 執行
打開http://localhost:3000/ 即可看到畫面。
pages
Nuxt.js會自動配置pages中每一個.vue檔案的route。
假設在pages資料夾下新增一個如下內容的a
1. 安裝node.js
2. 建立專案:
接著會詢問一些初始化設定的東西，按照需求選擇即可:
3. 執行
打開http://localhost:3000/ 即可看到畫面。
pages
Nuxt.js會自動配置pages中每一個.vue檔案的route。
假設在pages資料夾下新增一個如下內容的a
續上篇，那是Vue 2 Options API的舊寫法，這邊改成用Vue 3 Composition API的寫法:
Vue2:
Vue3 setup() / ref / reactive
Composition API可以直接在setup()裡面定義data跟method，簡潔許多。
props
續上篇，那是Vue 2 Options API的舊寫法，這邊改成用Vue 3 Composition API的寫法:
Vue2:
Vue3 setup() / ref / reactive
Composition API可以直接在setup()裡面定義data跟method，簡潔許多。
props
S1.建立資料庫 user
S2.建立 index.htm
a.載入 vue.js、jquery、bootstrap
b.版面建立
S3.vue.js程式
新增、查看列表、互動視窗、修改、刪除
index.htm
VueControl.js
原碼:https://reurl.cc/e3k8yL
S1.建立資料庫 user
S2.建立 index.htm
a.載入 vue.js、jquery、bootstrap
b.版面建立
S3.vue.js程式
新增、查看列表、互動視窗、修改、刪除
index.htm
VueControl.js
原碼:https://reurl.cc/e3k8yL
Nuxt.js 是以 Vue 為基底所建構的框架，透過 Nuxt.js，我們能夠更輕鬆地開發靜態頁面 (Static Site)、操作體驗良好的單頁式網站 (SPA)、甚至是顧及 SEO 的伺服器端渲染 (SSR) 網站。
Nuxt.js 是以 Vue 為基底所建構的框架，透過 Nuxt.js，我們能夠更輕鬆地開發靜態頁面 (Static Site)、操作體驗良好的單頁式網站 (SPA)、甚至是顧及 SEO 的伺服器端渲染 (SSR) 網站。