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.official ♥️
沙龍一直是創作與交流的重要空間，這次 vocus 全面改版了沙龍介面，就是為了讓好內容被好好看見！
你可以自由編排你的沙龍首頁版位，新版手機介面也讓每位訪客都能更快找到感興趣的內容、成為你的支持者。
改版完成後可以在社群媒體分享新版面，並標記 @vocus.official ♥️
每年4月、5月都是最多稅要繳的月份，當然大部份的人都是有機會繳到「綜合所得稅」，只是相當相當多人還不知道，原來繳給政府的稅！可以透過一些有活動的銀行信用卡或電子支付來繳，從繳費中賺一點點小確幸！就是賺個１%~2%大家也是很開心的，因為你們把沒回饋變成有回饋，就是用卡的最高境界
所得稅線上申報
每年4月、5月都是最多稅要繳的月份，當然大部份的人都是有機會繳到「綜合所得稅」，只是相當相當多人還不知道，原來繳給政府的稅！可以透過一些有活動的銀行信用卡或電子支付來繳，從繳費中賺一點點小確幸！就是賺個１%~2%大家也是很開心的，因為你們把沒回饋變成有回饋，就是用卡的最高境界
所得稅線上申報
比如點了商品詳細資料，會導到商品詳細資料頁面並帶上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) 網站。