# 🏅 Day 1 - 起手式 : 建立 Nuxt3 專案

## 今日學習目標

- [建立 Nuxt3 專案](#建立-Nuxt3-專案)
- [Nuxt 基礎指令](#Nuxt-%E5%9F%BA%E7%A4%8E%E6%8C%87%E4%BB%A4)
- [新增頁面](#%E6%96%B0%E5%A2%9E%E9%A0%81%E9%9D%A2)

## 建立 Nuxt3 專案

### 環境準備

- [**Node.js**](https://nodejs.org/zh-cn/download/package-manager) - v18 版以上，建議使用偶數 ( v18 或 v20 ) LTS 版本
- VSCode 編輯器，並安裝 [Vue - Official](https://marketplace.visualstudio.com/items?itemName=Vue.volar) 插件

### **使用指令建立**專案

步驟一. 開啟 VSCode 終端機，輸入並執行下方的指令

npx nuxi@latest init [專案名稱]

步驟二. 步驟一執行後會詢問是否要安裝 `nuxi` 套件，選擇 `y` 安裝


步驟三. 選擇套件管理工具。後續講解示範將會以 `npm` 為主，因此這邊會選擇 `npm` 。


步驟四. 步驟三選擇後會開始安裝 Nuxt ，安裝完畢後將會詢問是否要初始化 `Git` 。這邊建議初始化 `Git`，因此示範選擇 `Yes`


步驟五. 顯示 `“Nuxt project has been created with the v3 template”` 代表有成功建立專案，接下來就可以進入專案目錄並安裝 Nuxt3 專案的依賴套件

cd [專案名稱]
code .

補充 : `code` 是 VSCode 編輯器提供的指令。其中 `code .` 的用途是在當前終端機路徑下使用 VSCode 開啟該路徑中的專案資料夾。 ( [VSCode 文件](https://vscode.dev.org.tw/docs/editor/command-line) )

📌 另外需注意，MacOS 作業系統要先安裝 **code 指令，才能使用** code . 指令打開專案。可以閱讀 VSCode 官方提供的  [macOS 設定指南](https://vscode.dev.org.tw/docs/setup/mac) 安裝

步驟六. 在終端機執行 `npm run dev` 執行 [dev 指令](https://nuxt.com/docs/api/commands/dev)，開啟開發伺服器

 npm run dev 

📌 關於專案初始化步驟，可以閱讀官方文件 : [Installation](https://nuxt.com/docs/getting-started/installation)

### 專案結構

打開專案後會看到下圖的目錄結構

以下針對核心檔案用途進行補充 :

- [app.vue](https://nuxt.com/docs/guide/directory-structure/app) : 頁面的進入點元件。
- [.nuxt](https://nuxt.com/docs/guide/directory-structure/nuxt) : 由 Nuxt 框架自動生成，在開發環境用來生成 Vue，請不要刪除它、調整它。
- 如果不小心刪除，可以重跑`npm run dev`
- [tsconfig.json](https://nuxt.com/docs/guide/directory-structure/tsconfig) : TypeScript 的設定檔，預設會使用 .nuxt/tsconfig.json 的設定。
要啟用 TypeScript 需要依照 [官方文件](https://nuxt.com/docs/guide/concepts/typescript) 在 `nuxt.config.ts` 中，設置 `typescript.typeCheck: true`

  // [tsconfig.json](https://nuxt.com/docs/guide/directory-structure/tsconfig)
  export default defineNuxtConfig({
    typescript: {
      typeCheck: true
    }
  })

- [nuxt.config.ts](https://nuxt.com/docs/guide/directory-structure/nuxt-config) : Nuxt3 專案的設定檔，在初始化後預設會是 `.ts` 檔案 ( TypeScript ) 。詳細的設定可以至 [Nuxt Configuration](https://nuxt.com/docs/api/nuxt-config) 查看

  // [nuxt.config.ts](https://nuxt.com/docs/guide/directory-structure/nuxt-config) 
  export default defineNuxtConfig({
    // compatibilityDate 屬性 : 將 Nuxt3 的功能和行為鎖定在 2024-04-03 之前的版本，
    // 避免之後 Nuxt3 新版本的寫法調整會影響到目前專案的運作
    compatibilityDate: '2024-04-03', 

    // 啟用 Nuxt DevTools 開發工具
    devtools: { enabled: true }
  })

---

### Nuxt 基礎指令

### nuxi init

用來初始化新的 Nuxt3 專案。

npx nuxi init [專案與資料夾名稱]

關於 `nuxi init` 指令，可以閱讀官方文件 : [nuxi init](https://nuxt.com/docs/api/commands/init)

### nuxi add

因為 Nuxt3 預設僅提供基礎的資料夾與功能，所以在開發時需要額外使用 `nuxi add` 指令添加功能 ( 例如元件、路由 …等 ) 。

npx nuxi add <TEMPLATE> <NAME>

參數：

`<TEMPLATE>` : 要生成的模板名稱 ，可以填入 api 、plugin、 component、composable、 middleware、 layout,、page
`<NAME>` : 要生成的檔案名稱與路徑

📌 關於 nuxi add 指令，可以閱讀官方文件 : [nuxi add](https://nuxt.com/docs/api/commands/add)

---

### 新增頁面

建立專案後，在 app.vue 預設會使用 `<NuxtRouteAnnouncer />` 與 `<NuxtWelcome />` 元件。

// app.vue

<template>
  <NuxtRouteAnnouncer />
  <NuxtWelcome />
</template>

📌 關於元件的用途可以閱讀官方文件 :

- [<NuxtRouteAnnouncer />](https://nuxt.com/docs/api/components/nuxt-route-announcer)
- [<NuxtWelcome />](https://nuxt.com/docs/api/components/nuxt-welcome)

在這一步，畫面目前顯示的是 Nuxt3 `<NuxtWelcome />` 元件提供的歡迎畫面

若希望在專案可以使用自定義的頁面，需要依序執行以下兩步驟 :

1. 使用 `npx nuxi add page` 指令新增頁面
2. 更換 app.vue 的 `<NuxtWelcome />` 元件

### npx nuxi add page 頁面名稱

產生放置頁面路由的 pages 資料夾

範例 :

// 生成　pages/index.vue ( 前台首頁 ) 　   
npx nuxi add page index

// 生成　pages/admin/index.vue ( 後台首頁 )    
npx nuxi add page admin/index 

// 生成　pages/product/[id].vue ( 動態路由 )
// MacOS 需補上 「雙引號」，否則會出現錯誤
npx nuxi add page "product/[id]"
// Windows 無需補上 「雙引號」即可直接生成
npx nuxi add page product/[id]

### 使用 <NuxtPage /> 元件顯示頁面

若希望顯示 pages 資料夾新增的頁面，需要將 `<NuxtWelcome />` 元件替換成 `<NuxtPage />`

// app.vue

<template>
  <NuxtRouteAnnouncer />
  <NuxtPage />
</template>

📌 關於 `<NuxtPage />` 元件可以閱讀官方文件 : [<NuxtPage />](https://nuxt.com/docs/api/components/nuxt-page)

## 題目

請嘗使用 Nuxt 指令建立 Nuxt3 專案，新增並顯示前台首頁頁面 ( index.vue )


## 回報流程

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


<!--

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

-->

回報區
---
| # | Discord | Github / 答案 |
| --- | ----- | ----- |
|1|Rocky|[GitHub repo](https://github.com/WuRocky/Nuxt-Hotel-Booking-Website.git)|
|2|Steven|[GitHub repo](https://github.com/y7516552/2024-nuxt3-homework.git)|
| 3 | runweiting | [GitHub repo](https://github.com/runweiting/2024-nuxt-1104) |
| 4 | 樂樂 | [GitHub repo](https://github.com/PinyiW0/NuxtDailyHw) |
| 5 | dragon | [GitHub repo](https://github.com/peterlife0617/2024-nuxt-training-homework01) |
| 6 | MY | [GitHub repo](https://github.com/ahmomoz/Nuxt3-hw-d1)
| 7 | 好了啦 |[GitHub repo](https://github.com/ZhangZJ0906/nuxt-live)|
| 8 | lidelin | [GitHub repo](https://github.com/Lide/hexschool-nuxt3-training)
| 9 | LinaChen |[GitHub repo](https://github.com/Lina-SHU/nuxt-daily-task)|
| 10 | hannahTW |[GitHub repo](https://github.com/hangineer/2024-nuxt-practice)|
| 11 | 圈圈 | [GitHub repo](https://github.com/panduola666/nuxtStudy_2024) |
| 12 | Otis | [GitHub repo](https://github.com/olivier615/nuxtdaily) |
| 13 | Ming | [GitHub repo](https://github.com/ming77712/2024-nuxt3-daily01) |
| 14 | NeiL | [GitHub repo](https://github.com/Neil10241126/nuxt-demo)
| 15 | Tough life | [GitHub repo](https://github.com/hakuei0115/Nuxt_testing) |
| 16 | kevinhes | [GitHub repo](https://github.com/kevinhes/nuxt-daily-mission) |
| 17 | Eden | [Github repo](https://github.com/1denx/NuxtDailyHw)
| 18 | Ching | [GitHub repo](https://github.com/huangching07/2024-nuxt-daily)
| 19 | Stan | [GitHub repo](https://github.com/haoxiang16/nuxt-app)
| 20 | 松鼠 | [GitHub repo](https://github.com/meishinro/dailyMissionOne) |
| 21 | 小木馬 | [GitHub repo](https://github.com/wern0531/nuxt3-project) |
| 22 | wei_Rio | [GitHub repo](https://github.com/wei-1539/nuxtDailyHomeWork) |
| 23 | camiwang | [Github repo](https://github.com/iris0952/2024-nuxt3-homework)
| 24 | sponge | [Github repo](https://github.com/tw30006/sponge_web)
| 25 | Jarek | [Github repo](https://github.com/lj787448952/nuxt_pratice) |
| 26 | 眼睛 | [Github repo](https://github.com/Thrizzacode/nuxt-app) |
| 27 | Judy☻ | [Github repo](https://github.com/judytung/nuxt-demo) |
| 28 | Jim Lin | [GitHub repo](https://github.com/junhoulin/Nuxt3-hw-day1)|
| 29 | 陳正豪Howard | [GitHub repo](https://github.com/soarfox/hexschool-nuxt3-daily-task) |
| 30 | 阿榮 | [GitHub repo](https://github.com/Peg-L/nuxt3-daily-practice) |
| 31 | Ariel | [GitHub repo](https://github.com/Ariel0508/nuxtHw) |
| 32 | YI | [GitHub repo](https://github.com/sming0305/NUXT-learn) |
| 33 | tanuki狸 | [GitHub repo](https://github.com/tanukili/Nuxt-2024-week01-1.git) |
| 34 | Johnson | [GitHub repo](https://github.com/tttom3669/2024_hex_nuxt_daily) |
| 35 | Jane Lin | [GitHub repo](https://github.com/as60160/nuxt-daily/tree/day1-init) |
| 36 | Fabio20 | [GitHub repo](https://github.com/fabio7621/nuxtPratices) |
| 37 | barry1104 | [GitHub repo](https://github.com/barrychen1104/nuxt3-first-app) |
| 38 | hsin yu | [GitHub repo](https://github.com/dogwantfly/nuxt3-daliy-tasks/commit/0a0be115bdb1240ccdb69add5c8eb32e75034d60) |
| 39 | Adonis | [GitHub repo](https://github.com/yuna1060416/2024Nuxt3Homework/tree/day01) |
| 40 | 阿塔 | [GitHub repo](https://github.com/QuantumParrot/2024-Hexschool-Nuxt-Camp-Daily-Task) |
| 41 | Nielsen | [GitHub repo](https://github.com/asz8621/nuxt3-daily-task/tree/day1-create-nuxt-project) |
| 42 | Moon | [GitHub repo](https://github.com/mytrylin/Nuxt3-Day1-Init) |
| 43 | KenChan | [GitHub repo](https://github.com/kenchan1604/Nuxt3_Day_1) |
<!-- 快速複製
| 0 | name | [GitHub repo]() |
-->