# 🏅 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 終端機，輸入並執行下方的指令 ```bash npx nuxi@latest init [專案名稱] ``` 步驟二. 步驟一執行後會詢問是否要安裝 `nuxi` 套件，選擇 `y` 安裝 ![image](https://hackmd.io/_uploads/rkbTPWrW1e.png) 步驟三. 選擇套件管理工具。後續講解示範將會以 `npm` 為主，因此這邊會選擇 `npm` 。 ![image](https://hackmd.io/_uploads/r1AaD-rbke.png) 步驟四. 步驟三選擇後會開始安裝 Nuxt ，安裝完畢後將會詢問是否要初始化 `Git` 。這邊建議初始化 `Git`，因此示範選擇 `Yes` ![image](https://hackmd.io/_uploads/SJ5AvbBWJl.png) 步驟五. 顯示 `“Nuxt project has been created with the v3 template”` 代表有成功建立專案，接下來就可以進入專案目錄並安裝 Nuxt3 專案的依賴套件 ```bash 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) 安裝 ![image](https://hackmd.io/_uploads/SyVfdbHbJg.png) 步驟六. 在終端機執行 `npm run dev` 執行 [dev 指令](https://nuxt.com/docs/api/commands/dev)，開啟開發伺服器 ```bash npm run dev ``` 📌 關於專案初始化步驟，可以閱讀官方文件 : [Installation](https://nuxt.com/docs/getting-started/installation) ### 專案結構 打開專案後會看到下圖的目錄結構 ![image](https://hackmd.io/_uploads/H1MrubH-kg.png) 以下針對核心檔案用途進行補充 : - [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` ```jsx // [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) 查看 ```jsx // [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 專案。 ```bash npx nuxi init [專案與資料夾名稱] ``` 關於 `nuxi init` 指令，可以閱讀官方文件 : [nuxi init](https://nuxt.com/docs/api/commands/init) ### nuxi add 因為 Nuxt3 預設僅提供基礎的資料夾與功能，所以在開發時需要額外使用 `nuxi add` 指令添加功能 ( 例如元件、路由 …等 ) 。 ```bash 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 />` 元件。 ```html // 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 />` 元件提供的歡迎畫面 ![image](https://hackmd.io/_uploads/S1uzFbSW1x.png) 若希望在專案可以使用自定義的頁面，需要依序執行以下兩步驟 : 1. 使用 `npx nuxi add page` 指令新增頁面 2. 更換 app.vue 的 `<NuxtWelcome />` 元件 ### npx nuxi add page 頁面名稱 產生放置頁面路由的 pages 資料夾 範例 : ```bash // 生成　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 />` ```html // app.vue <template> <NuxtRouteAnnouncer /> <NuxtPage /> </template> ``` 📌 關於 `<NuxtPage />` 元件可以閱讀官方文件 : [<NuxtPage />](https://nuxt.com/docs/api/components/nuxt-page) ## 題目 請嘗使用 Nuxt 指令建立 Nuxt3 專案，新增並顯示前台首頁頁面 ( index.vue ) ![image](https://hackmd.io/_uploads/ryRNDbrbkl.png) ## 回報流程 將答案上傳至 GitHub 並複製 GitHub repo 連結貼至底下回報就算完成了喔 ! 解答位置請參考下圖（需打開程式碼的部分觀看） ![](https://i.imgur.com/vftL5i0.png) <!-- 解答 : 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]() | -->