Vue 3 的雞毛蒜皮各種小特性
I was the main web front-end engineer responsible for developing and maintaining the customer-facing platform for WisdomHall (品學堂) in 2024 Q3 Q4, code reviewed by CTO and a senior engineer. http://learning.wisdomhall.com.tw has total active 257k users, according to their Facebook post: https://www.facebook.com/share/p/1MnjbwZxCV/ My tech stack includes JavaScript, Vue 2, Nuxt 2, git, and Docker.
在 Nuxt 3 專案中,這是一個被稱為「自動導入 (auto-imports)」的特性
我:為何 showPost 不用引用就可以直接使用?
[id].vue: 1 lines selecteduseAsyncData
Gemini:
stat_minus_1Thinking
在 Nuxt 3 專案中,這是一個被稱為「自動導入 (auto-imports)」的特性。
Nuxt 會自動掃描特定目錄下的檔案,例如 composables/ 和 utils/,並將其中定義的函式、變數等在整個應用程式中變為可用,而不需要手動 import。
因此,showPost 函式很可能被定義在 composables/ 目錄下的某個檔案中,Nuxt 框架自動幫您完成了引用的工作。
為了確認,我將在 composables 目錄下搜尋 showPost 的定義。
checkSearchText...aWeb/composables ...unction showPost
stat_minus_1Thinking
搜尋 function showPost 沒有找到結果。這可能是因為 showPost 是用 const 或 let 定義的箭頭函式。
我將使用更寬鬆的模式再次搜尋 composables 目錄,來找出 showPost 的定義。
checkSearchText...aWeb/composables showPost
stat_minus_1Thinking
在 composables 目錄中也沒找到。Nuxt 3 也會自動導入 utils/ 目錄下的函式。我來檢查一下 utils/ 目錄。
checkSearchText...okokaraWeb/utils showPost
stat_minus_1Thinking
找到了!
showPost 函式是在 /Users/pac/codes/aj/KokokaraWeb/utils/postApi.ts 這個檔案中定義的,內容如下:
// /Users/pac/codes/aj/KokokaraWeb/utils/postApi.ts
export const showPost = postApi.show
正如我之前提到的,因為這個檔案位於 utils/ 目錄下,Nuxt 3 的自動導入 (auto-imports) 機制會將其 export 的 showPost 函式自動註冊為全域可用的 composable。
所以您在頁面中可以直接使用 showPost(),而不需要手動 import 它。
Prompts to try
[id].vue: line 87
Included in prompt