###### tags: `Nuxt`
# Nuxt3
- auto import
## ==指令==
1. npx nuxi init nuxt-app
2. cd nuxt-app
3. npm install
4. 打包
- npm run build
- 輸出 output 資料夾
- npm run generate
- 靜態網頁
- 如果有動態路由(ex: /user/1, /user/2) 需透過 `nuxt.config` 設置
## ==架構==
- `.output` build 後的資料，可以用 ==yarn start== 執行 `.output` 的程式
- `assets`
- [components](#components)
- `composables` 組合式邏輯
- `content`
- [layouts](#layout)
- `middleware`
- `node modules`
- `pages` 路由位置資料夾
- pages 內 檔名小寫
- [id].vue 動態參數命名
- [...slug].vue
- [plugins](#plugins)
- `server`
- `public`
- `.gitignore`
- `app.vue`
- `.nuxtignore`
- `nuxt.config.ts`
- `package.json`
- `tsconfig.json`
## 與 vue 對應
1. router link > NuxtLink
2. router view > NuxtPage
## ==components==
- Dynamic Imports:　延遲加載組件
直接加上 Lazy 前綴詞

<template>
  <div>
    <TheHeader />
    <slot />
    <LazyTheFooter />
  </div>
</template>

## ==layout==
**layout** > **default.vue**

<template>
  <div>
    Some default layout shared across all pages
    <slot />
  </div>
</template>

**layout** > **a.vue**

<template>
  <div>
    a
    <slot />
  </div>
</template>

### 預設 layout
**app.vue**

<template>
  <NuxtLink to="/about">about </NuxtLink>
  <NuxtLink to="/">| Home</NuxtLink>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

### 各頁 layout
**about.vue**

<script>
export default {
  setup() {
    definePageMeta({
      layout: "a",
    });
  },
};
</script>

**此寫法會同時出現 app.vue 的 layout 跟 a 的 layout**

<template>
  <NuxtLayout name='a'>
    <div>
      <h1>about page</h1>
      <NuxtPage :foobar="1234" />
    </div>
  </NuxtLayout>
</template>

## ==plugins==
- Nuxt 自動讀取 plugins目錄中的文件並加載
- 可以在文件名中使用 .server 或 .client 後綴以僅在服務器或客戶端加載插件
- 無須在 nuxt.config 單獨添加到您的目錄中
- 檔案必須用 export default 輸出

## ==請求==
1. 皆返回 `data`, `pending`, `refresh`, `error` 四個參數
2. key: 唯一鍵值，若有多個相同請求，會根據 key 值去重
3. option
- lazy: 等到 api 回來後才做路由導航，用戶體驗就會較差但可搭配 pending 解決，預設為 false
- default: 適用於 lazy = true
- server: 在 server 請求，預設為 true
- transform
- watch
- initialCache:　預設為 true
- pick: nuxt 會先把請求到的數據放置 payload 做緩存，為防止 payload 越來越龐大，可以用只保留需要的數據。

        const { data, pending, error, refresh } = await useFetch(
          'https://api.nuxtjs.dev/mountains',
          {
            pick: ['title']
          }
        )

3. 請求方法
- **[＄fetch](https://v3.nuxtjs.org/api/utils/$fetch#fetch)**
fetch 封裝
- **[useAsyncData](https://v3.nuxtjs.org/api/composables/use-async-data)**
可跟 $fetxh 搭配使用
- **[useLazyAsyncData](https://v3.nuxtjs.org/api/composables/use-lazy-async-data)**
useAsyncData + lazy 的封裝
- **[useFetch](https://v3.nuxtjs.org/api/composables/use-fetch)**
useAsyncData + $fetch 的封裝
==會自動生成 key==
- **[useLazyFetch](https://v3.nuxtjs.org/api/composables/use-lazy-fetch)**
useAsyncData + $fetch + lazy 的封裝
## ==proxy==
為解決本機開發跨域問題，需設置代理伺服器

vite: {
    server: {
        proxy: {
            '/api': {
                target: 'https://webapi.1111.com.tw',
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/api/, "")
            }
        },
    },
},

打 API `/api/apiEx/other/login`
此設置會將 `http://localhost:3000/api/apiEx/other/login`
代理成 `https://webapi.1111.com.tw/apiEx/other/login`

## ==環境參數==
- process.client
- process.server
# scss
"sass": "^1.54.5",
"sass-loader": "^13.0.2"
## 指令
1. npm install sass sass-loader

# [bootstrap](https://getbootstrap.com/)
"bootstrap": "^5.2.0",
"bootstrap-icons": "^1.9.1"
## 指令
1. npm add bootstrap
2. npm i bootstrap-icons
## 引用
**nuxt.config.ts**

import { defineNuxtConfig } from "nuxt";

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  css: [
    "bootstrap/dist/css/bootstrap.min.css",
    "@/assets/css/custom.scss",
    "bootstrap-icons/font/bootstrap-icons.scss",
  ],
});

## [自定義樣式](https://getbootstrap.com/docs/5.2/customize/sass/)
**assets > css > custom.scss**

// Required
@import "../node_modules/bootstrap/scss/functions";

// Default variable overrides
$green: rgba(2, 53, 39);

// Required
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

# [i18](https://juejin.cn/post/6844904054825418766)

# VueUse
## [watch](https://vueuse.org/functions.html#category=Watch)
### watchThrottled
我們會事先指定一個時長delay，當用戶連續快速地觸發某個事件的時候，只會依照delay定期執行。通過Throttle則可以實現這樣的效果
### watchDebounced
我們也會事先指定一個時長delay，當用戶連續快速地觸發某個事件的時候，只有間隔時間大於delay的時候才會執行一次。這樣的效果則是由Debounce實現的。

:::info
**watchThrottled** 及 **watchDebounced** 可以理解成「在閉包內維護一個 定時器」
兩者最大差異為　**watchThrottled**　不會取消上一次函數的執行
:::