# 🏅 Day 4 - 使用指令建立元件
## 今日學習目標

- 學習使用指令建立元件
- 學習透過 Auto Imports 使用元件

## 建立元件

可以使用 `npx nuxi add component 元件名稱` 指令建立元件。在檔案目錄中會新建立放置元件的 components 資料夾 ，例如下圖使用了 `npx nuxi add component Header` 指令在 components 資料夾內建立元件 Header.vue 。

## 使用元件

在 Vite 、 Vue CLI 與 Nuxt2 ，都必須要使用 `import` 匯入元件

<script setup>
  import Header from '@/components/Header.vue';
</script>

<template>
  <Header />
  <h1>首頁</h1>
</template>

而 Nuxt3 提供了 **Auto Imports** 功能，放在 components 資料夾內的元件都可以直接在 `<template></template>` 載入，不再需要使用 import 語法，可以直接在任何元件、頁面使用元件的名稱。

<template>
  <Header />
  <h1>首頁</h1>
</template>

當然在 Nuxt3 也可以不使用 **Auto Imports** 功能載入元件，使用 import 語法也是可以的 :

<script setup>
  import Header from '@/components/Header.vue';
  // import { Header } from '#components'; 
  // Nuxt3  Direct Imports 語法
  // https://nuxt.com/docs/guide/directory-structure/components#direct-imports
</script>

<template>
  <Header />
  <h1>首頁</h1>
</template>

## 使用資料夾管理元件

若想要將頁面中的區塊拆分成元件進行管理，可以在 components 資料夾中建立**對應的頁面資料夾**來管理元件。

例如 : 在前台首頁 ( index.vue ) 中有一個 Banner 區塊，可以將 Banner 區塊拆分成獨立的元件，並將其放置在 components 資料夾下的 home 資料夾中 ( 如下圖 )

使用資料夾管理元件，將元件自動載入需要在元件加入資料夾的名稱 ( 大駝峰 ) 。

例如下圖的 `<HomeBanner />` 會從 components 資料夾中載入 home/banner.vue。

### 再更細部拆分元件

再更進一步，可以把元件內的內容拆分出來。以上方的 banner.vue 為例，.banner-title 、.banner-subtitle、.banner-button ，可以拆分成下圖的結構，在 Index.vue **進入點，**使**用**資料夾的路徑 ( 大駝峰 ) 載入 `<HomeBannerTitle />`、`<HomeBannerSubTitle />`、`<HomeBannerButton />` 。

## **關於 Auto Imports** 功能

Auto Imports 可以自動載入以下功能，不需明確地匯入 :

- 自己建立的元件 ( components/ 目錄 )。( [文件](https://nuxt.com/docs/guide/directory-structure/components) )
- Nuxt3 內建的元件 ，例如 `<NuxtPage />` 。 ( [文件](https://nuxt.com/docs/api/components/nuxt-page) )
- Vue Composables ( composables/ 目錄 )。 ( [文件](https://vuejs.org/guide/reusability/composables) )
- Nuxt3 內建的 Composables ，例如 **useFetch() 。** ( [文件](https://nuxt.com/docs/api/composables/use-fetch) )
- 自己建立的工具函數 ( utils/ 目錄 )。 ( [文件](https://nuxt.com/docs/guide/directory-structure/utils) )
- Vue API ( 例如 生命週期 Hook、 ref() 、reactive 、computed …等 ) 。

components/ 、composables/、utils/ 三個目錄是 Nuxt3 固定的目錄結構。關於 Auto Imports ，可以閱讀官方文件 : https://nuxt.com/docs/guide/concepts/auto-imports

### **元件預設的 Auto Imports 設定**

根據 [官方文件](https://nuxt.com/docs/api/nuxt-config#components)， **預設會掃描** ~/components/global 與 ~/components" 資料夾，將~/components/global 路徑下的元件**全域註冊**。而 ~/components 路徑下的元件則會是區域註冊。

default defineNuxtConfig({
  components: {
    dirs: [
      {
        path: "~/components/global",  
        global: true,  // 全域註冊
      },
      "~/components",  // 區域註冊
    ],
  },
});

若要禁用元件的 **Auto Imports** ，可以在 nuxt.config.ts 將 components.dirs 設定為空陣列

export default defineNuxtConfig({
  components: {
    dirs: []
  }
})

<br>

> 今日學習的[範例 Code - 資料夾: day4-component](https://github.com/hexschool/nuxt-daily-tasks-2024)

## 題目
請 fork 這一份 [模板](https://github.com/jasonlu0525/nuxt3-live-question/tree/day4-component)， 完成以下條件 :

- 將 components/ProductCard.vue 卡片的圖片、標題、價格、按鈕拆分成單獨的元件 ( 如下圖 ) ，並且在 product/card 資料夾下進行管理。
- ProductCard.vue 的 CSS 需要跟元件一起拆分。props 的資料需要傳入元件。
- 在 pages/index.vue 的模板可以正常顯示卡片元件。


## 回報流程

將答案上傳至 GitHub 並複製 GitHub repo 連結貼至底下回報就算完成了喔 !
解答位置請參考下圖（需打開程式碼的部分觀看）


<!--

解答 : https://github.com/jasonlu0525/nuxt3-live-answer/tree/day4-component

-->

回報區
---
| # | Discord | Github / 答案 |
| --- | ----- | ----- |
|1|kevinhes|[GitHub](https://github.com/kevinhes/nuxt-daily-mission/tree/day4)|
|2|樂樂|[GitHub](https://github.com/PinyiW0/NuxtDailyHw)|
|3|LinaChen|[GitHub](https://github.com/Lina-SHU/nuxt3-live-question)|
|4|Rocky|[GitHub](https://github.com/WuRocky/Nuxt-Day4-Components.git)|
| 5 | dragon | [GitHub](https://github.com/peterlife0617/2024-nuxt-training-homework01/tree/feature/day04) |
|6|Steven| [GitHub](https://github.com/y7516552/nuxt3-live-question/tree/day4-component) |
|7|眼睛| [GitHub](https://github.com/Thrizzacode/nuxt3-live-question/tree/day4-component) |
|8|NeiL|[GitHub](https://github.com/Neil10241126/nuxt-demo/tree/day4-component)|
| 9 | MY | [GitHub](https://github.com/ahmomoz/nuxt3-live-question/tree/day4-component-hw) |
| 10 | 松鼠 | [GitHub](https://github.com/meishinro/dailyMissionFour) |
| 11 | 小木馬 | [GitHub](https://github.com/wern0531/Nuxt-test-day4) |
| 12 | Ming | [GitHub](https://github.com/ming77712/2024-nuxt3-daily01) |
| 13 | hannahTW | [GitHub](https://github.com/hangineer/nuxt3-live-question/tree/day4-component) |
| 14 | Eden | [Github](https://github.com/1denx/NuxtDailyHw/tree/feature/day4-component)|
|15|stan| [GitHub](https://github.com/haoxiang16/nuxt3-live-question/tree/day4-component) |
| 16 | Rio | [GitHub](https://github.com/wei-1539/nuxtDailyHomeWork) |
| 17 | Ariel | [GitHub](https://github.com/Ariel0508/nuxtHw) |
|18|阿榮|[Github](https://github.com/Peg-L/hex-nuxt3-project)|
| 19 | Tough life | [GitHub](https://github.com/hakuei0115/Nuxt_testing) |
| 20 | Jim Lin| [GitHub](https://github.com/junhoulin/Nuxt3-hw-day4) |
| 21 | runweiting | [GitHub](https://github.com/runweiting/2024-NUXT-Task/tree/day4) |
| 22 | Otis | [GitHub](https://github.com/olivier615/nuxt3-live-question-day4) |
| 23 | wicebing | [GitHub](https://github.com/wicebing/nuxt3-live-question/tree/day4-component) |
| 24 | tanuki狸 | [GitHub](https://github.com/tanukili/Nuxt-2024-week01-2/tree/day4-component) |
| 25 | barry1104 | [GitHub](https://github.com/barrychen1104/nuxt3-live-question/tree/day4-component) |
|26|好了啦|[GitHub](https://github.com/ZhangZJ0906/nuxt-live)|
| 27 | hsin yu | [GitHub](https://github.com/dogwantfly/nuxt3-daily-task-live-question/commit/13365de3074426eddf381edc58827bcefa54e404) |
| 28 | 小蹦 | [GitHub](https://github.com/lgk559/hex-Nuxt3/tree/day4_addComponent) |
| 29 | Fabio20 | [GitHub](https://github.com/fabio7621/nuxt3-live-question-d2/tree/nuxt3-live-day4) |
| 30 | 阿塔 | [GitHub](https://github.com/QuantumParrot/2024-Hexschool-Nuxt-Camp-Daily-Task) |
| 31 | YI | [GitHub](https://github.com/sming0305/NUXT-learn) |
| 32 | Adonis | [GitHub](https://github.com/yuna1060416/2024Nuxt3Homework/tree/day04) |
| 33 | hoyiiiii | [GitHub](https://github.com/heyi5478/nuxt3-live-question) |
| 34 | Nielsen | [GitHub](https://github.com/asz8621/nuxt3-daily-task/tree/day4-component) |
| 35 | lidelin | [GitHub](https://github.com/Lide/nuxt3-live-question/tree/day4-component) |
| 36 | Johnson | [GitHub](https://github.com/tttom3669/2024_hex_nuxt_daily/tree/day4-component) |
<!-- 快速複製
| --- | ----- | [GitHub]() |
-->