## Nuxt 第一週課綱
文件連結：https://hackmd.io/c6erOTPCRXClenNSFgVDuw?view
## 課程活動
1. 每日任務
2. 主線作業（第二週開放）
3. 線上閒聊 or 更多內容請參閱 [開學典禮](https://courses.hexschool.com/courses/nuxt3/lectures/58178739)
## 作業說明
1. [切版 repo 連結](https://github.com/hexschool/course-nuxt-layout)
2. [設計稿](https://www.figma.com/design/6pTFrdb5a1lYKmMnFeT5Mf/%E5%85%AD%E8%A7%92-Project-%2F-%E9%85%92%E5%BA%97%E8%A8%82%E6%88%BF%E7%B6%B2%E7%AB%99?node-id=1-1699&node-type=section&t=aStgUIRmBrxSpGBa-0)
3. [API 文件](https://nuxr3.zeabur.app/swagger/) 、 [自己建立 API 環境的說明文件（ GitHub Repo README)](https://github.com/hexschool/freyja)
4. [Nuxt Render 部署教學](https://nuxt.dev.org.tw/deploy/render)
## 建立 Nuxt 環境
**Node.js 環境（Nuxt 官方建議 18+，但會建議直上 20+）：**
1. 官方 Node.js 環境：https://nodejs.org/zh-tw
2. NVM（請確保電腦中沒有任何其他的 Node 環境）：
1. Windows：https://courses.hexschool.com/courses/nuxt3/lectures/56197670
2. Mac：https://www.casper.tw/development/2022/01/10/install-nvm/
**安裝 Nuxt：** https://nuxt.com/docs/getting-started/installation
流程參考：
1. `npx nuxi@latest init <project-name>`
2. Which package manager would you like to use? 推薦
1. npm
2. pnpm
3. Initialize git repository? **Yes**
### 專案檔案說明：
參考：https://nuxt.com/docs/guide/directory-structure/nuxt
資料夾：
- **.nuxt*** ：.nuxt 是 Nuxt.js 的生成文件夾，儲存編譯後的資源。
- **node_modules***：專案使用相關套件
- **public***：通常用來儲存靜態資源
- **Server***：後端邏輯或 API 伺服器功能的方法會放在這
- 另包含：API、Routes、middleware 等子內容
- assets：JS、CSS 等需要編譯的原始資源
- content：可以加入 markdown、json 等靜態資料
- Layouts：可複用的版型。
- pages：Nuxt 提供基於檔案建立路由
- components：Vue/Nuxt 元件
檔案：
- **app.vue**： 專案的主要 Vue 元件檔案。
- **nuxt.config.ts：** [專案設定檔](https://nuxt.com/docs/api/nuxt-config)
- .gitignore：git 忽略檔案
- package.json： 管理相依套件，可執行的腳本
- tsconfig.json： TypeScript 的配置檔，定義了如何編譯 TypeScript 程式碼。
- .env： [環境變數](https://nuxt.com/docs/guide/directory-structure/env)
### npm script
- build：編譯成 Server Production 形式
- dev：開發中模式，包含 HMR（模組替換）
- generate：編譯成 Static Site Generation 形式
- preview：預覽 build 或 generate 的結果
- postinstall：後製安裝，在你專案生成像是 .nuxt 的目錄
## Nuxt Command
官方文件：https://nuxt.com/docs/api/commands/add
> 不用也沒關係，真的
示範：https://nuxt.com/docs/api/commands/add#nuxi-add-page
加入頁面以後，需要再 App.vue 中加入 `<NuxtPage />` 才能正確顯示頁面
> 補充：<NuxtRouteAnnouncer /> **是 Nuxt.js 提供的無障礙功能元件，專門用於在路由切換時向螢幕閱讀器提供額外的提示。
## VSCode 套件說明、環境定義…
- Vue 環境建議安裝：https://marketplace.visualstudio.com/items?itemName=Vue.volar
- 自動整理程式碼：https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
- 自動開啟 Vite 服務：https://marketplace.visualstudio.com/items?itemName=antfu.vite
- 檔名複製（Windows 推薦）：https://marketplace.visualstudio.com/items?itemName=jack89ita.copy-filename
- 色碼上色：https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight
### Prettier 參考設定格式
```
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[javascript]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[vue]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[css]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[scss]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[html]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"prettier.disableLanguages": []
}
```
如果你的 Prettier 沒有正確運作，可以設定你的預設格式， 按下 cmd + shift + P 或 ctrl + shift + P，輸入 format Doc…
1. 選擇 Format Document...
2. 設定預設格式器
3. 選擇 “Prettier”
### Prettier 格式化方法
1. 在熱鍵中進行設定
2. 自動儲存並進行格式化
### Snippet 程式碼片段
vue.json
```json
"vue": {
"prefix": "vue",
"body": [
"<script setup>\n</script>",
"<template>\n <div></div>\n</template>",
"<style scoped></style>",
],
"description": "vue init template"
}
```
## Public & Assets 資料夾
- Public 是不編譯資料夾：可以置入圖片、純 CSS、純 JS 等
- assets 是會編譯的資料夾：可以置入 .scss、需要另外編譯的額外資源
引入 .scss 資源， script、style 均可運作：
```html
<script setup>
import '~/assets/all.scss'
</script>
<style lang="scss">
@import '~/assets/all.scss';
</style>
```
### 引入 Bootstrap
> 新版的 Sass 運行 Bootstrap 會出現錯誤提示，如果想忽略這些錯誤提示，可以安裝舊版的編譯工具（不影響運作）。
>
1. `npm i -D sass-embedded@1.54.9` 安裝環境
2. `npm i bootstrap@5.3.3`
3. 到 node_modules 將 Bootstrap 中的 `_variables.scss` 、 `_variables-dark.scss` 複製到 assets 資料夾內
4. 引入 Bootstrap
```scss
@import "bootstrap/scss/functions";
// 自定義樣式，可以寫在這，或是在 ./variables 內
$primary: red;
@import "./variables";
@import "bootstrap/scss/bootstrap";
```
## 關於 SSR 的觀念
以下說明兩者差異
1. SEO
2. 首次載入速度
3. 伺服器負擔
### 你認為哪種合適？ SSR、CSR、混合
1. landing Page
2. 個人資料詳情頁
3. 部落格頁
4. 用戶訊息通知
5. 訂單詳情
## SSR, Client Only 與 AJAX
### useFetch
https://nuxt.com/docs/api/composables/use-fetch
- 避免使用額外的 AJAX 套件，多利用 Nuxt 所提供的 useFetch, $fetch, useAsyncData（useFetch 即是 $fetch、useAsyncData 的整合體，適用於大部分情境）
**useFetch 可以做到**
- 一般 AJAX 常見功能
- 狀態管理
- SSR
- SSR 搭配二次刷新
### ClientOnly
如果該區塊，不需要透過 SSR 就可以考慮僅使用 ClientOnly
> 顧名思義，可以作為瀏覽器渲染使用
延伸運用：
- 搭配 $fetch 使用
- 許多套件僅能運行在 client Only 的環境下，因此 SSR 無法使用
使用的注意事項：
- 如果搭配 useFetch，該資料還是會透過 Nuxt 取得
## 編譯示範：SSR、SSG
### SSR：
- npm run build
- npm run preview：預覽
- 正式運行：node ./server/index.mjs
**SSG：**
- npm run generate
- npm run preview：預覽
- 正式運行，可用任何靜態網站伺服器即可
---
## 關於 SEO
Google SEO：https://developers.google.com/search/docs/fundamentals/seo-starter-guide?hl=zh-tw
### 基本 SEO 起手式
1. 需要讓 Google 可以搜到內容 -> SSR
2. 主動讓 Google 搜尋到內容
1. 使用 [Google Analytics](https://developers.google.com/analytics?hl=zh-tw)、[Google Search Console](https://search.google.com/search-console/about)
2. 加入 Sitemap，範例：https://github.com/Wcc723/wcc723.github.io/blob/master/sitemap.xml
1. 延伸套件：https://nuxt.com/modules/sitemap
### 強化搜尋結果
結構化資料：https://developers.google.com/search/docs/appearance/structured-data/intro-structured-data?hl=zh-tw
**為什麼要在網頁中加入結構化資料？**
添加結構化資料可增加搜尋結果對使用者的吸引力，也可能鼓勵使用者更常與您的網站互動 (這稱為*複合式搜尋結果*)。
**結構化資料有哪些格式？**
- 結構化資料的定義：[Schema Org](https://schema.org/)
- **JSON-LD**：https://json-ld.org/playground/
- Microdata：https://schema.org/docs/gs.html
**實作範例：**
- JSON-LD：https://www.hexschool.com/courses/
- 驗證：https://search.google.com/test/rich-results
**常見問題：**
Ｑ：我驗證都有過，為什麼搜尋結果還是看不到結構化的樣式
Ａ：流量不夠，Google 就不會幫你用
Sign in with Wallet
Connect another wallet