[筆記] Nuxt Utils 搭配 Auto-Import 如何自定義分類 @地瓜大的飛翔旅程

章節連結

內容

Demo

Nuxt 的 Utils 搭配 Auto-Import 一起使用時，若遇上有需客製分類的需求，用 index.ts 當入口，就可以兼顧可讀性與方便性。

內容

根據文件：https://nuxt.com/docs/4.x/guide/directory-structure/app/utils

若你不是使用 index.ts，那其餘的檔案就要使用 default export。若你要客製分類你的 utils，那分類檔案內的函式就用一般的 export，然後在 index.ts 全部用 * 引入即可

Demo

/* utils/index.ts */
export * from './array'

1 2	/* utils/index.ts / export from './array'

/* utils/array.ts */
export const safePopArr = (arr: string[] = []): string[] => {
  const { length } = arr

  // 如果陣列最後一位不為空字串，回傳原始陣列
  if (arr[length - 1] !== '') return arr

  // 如果陣列最後一位為空字串，移除字串
  arr.pop()
  return arr
}

/* utils/array.ts */

export const safePopArr = (arr: string[] = []): string[] => {

const { length } = arr

// 如果陣列最後一位不為空字串，回傳原始陣列

if (arr[length - 1] !== '') return arr

// 如果陣列最後一位為空字串，移除字串

arr.pop()

return arr

}

按讚加入粉絲團