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
你可能也想看
孩子寫功課時瞇眼？小心近視！這款喜光全光譜TIONE⁺光健康智慧檯燈，獲眼科院長推薦，網路好評不斷！全光譜LED、180cm大照明範圍、5段亮度及色溫調整、350度萬向旋轉，讓孩子學習更舒適、保護眼睛！
孩子寫功課時瞇眼？小心近視！這款喜光全光譜TIONE⁺光健康智慧檯燈，獲眼科院長推薦，網路好評不斷！全光譜LED、180cm大照明範圍、5段亮度及色溫調整、350度萬向旋轉，讓孩子學習更舒適、保護眼睛！
創作者營運專員/經理（Operations Specialist/Manager）將負責對平台成長及收入至關重要的 Partnership 夥伴創作者開發及營運。你將發揮對知識與內容變現、影響力變現的精準判斷力，找到你心中的潛力新星或有聲量的中大型創作者加入 vocus。
創作者營運專員/經理（Operations Specialist/Manager）將負責對平台成長及收入至關重要的 Partnership 夥伴創作者開發及營運。你將發揮對知識與內容變現、影響力變現的精準判斷力，找到你心中的潛力新星或有聲量的中大型創作者加入 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) 網站。