Nuxt
, Nuxt3
index.html
檔案裏),這些多是在客戶端的應用,不能進行SEO優化(搜索引擎優化)。
只能全局引入一隻功能類型的(ex mixin or palette)scss檔案,但你可以把多個import在一隻檔案裡再一併引入
Nuxt最重要也最方便的點就是可以依照不同頁面定義不同的meta或title、description
你可以每頁定義不同的meta、引入不同的字體或不同的套件等等…
基礎路由
pages
裡新增檔案就可以直接利用NuxtLink
做跳轉動態路由規則為 ~/pages/[[slug]]/index.vue or ~/pages/[[slug]].vue
user.vue
users-[group]/[id].vue
包起來,變成user/users-[group]/[id].vue
props
來刷新meta並透過params
拿取資料middleware翻譯為中介層,介於server端跟client,因此可以在畫面渲染完前是先拿到server端的資料,有點類似於
vue-router
的路由守衛,但他能夠做更多事
1.你可以用它來檢查權限,重定向,發api請求…都沒人攔你了
2. 命名規範如components
為 kebab-case,例: someMiddleware => some-middleware)
注意:佈局名稱被規範為 kebab-case,例如: someLayout => some-layout。
middleware
裡動態切換每一頁的layout,參考setPageLayout Nuxt 會自動載入這個目錄中的任何元件。
.js
, .ts
與 .vue
副檔名的檔案,但只有最上層的檔案,才會自動的被載入為組合式函數
Nuxt 會自動載入這個目錄中的任何元件
基礎組件
BaseFooButton
Icon
.client
後綴添加到組件中。(註: 此功能僅適用於 Nuxt 自動導入的組件。手動導入的組件不會被轉換為僅限客戶端的組件。).server
即可Nuxt 會自動載入這個目錄檔案,作為插件使用,在檔案名稱可以使用後綴 .server 或 .client,例如, plugin.server.ts 或 plugin.client.ts 來決定只讓伺服器端或客戶端載入這個插件。
Nuxt會自動掃描~/server/api, ~/server/routes, and ~/server/middleware這幾個資料夾內的檔案並自動引入
Nuxt3
不支持Axios
,只可以使用$fetch API
或者使用Nuxt3
提供的原生api方法
Nuxt2
使用Axios
時有些小狀況: 例如:在server端會拿到字串(json格式),部屬會噴錯,只好手動判斷如果是server
端就先轉成物件Nuxt3
使用了ohmyfetch作為預設(用起來跟Axios
差不多)api/yourAPIName
ohmyfetch
create一個apiFetchNuxt3
原生提供的useFeatch
方法,畢竟pending
, error
, refresh
都幫你封裝好了注意:它們都必須在setup或生命週期鉤子中使用,回傳值如下
data
: 傳入異步函數的回傳結果。
pending
: 以true
或false
表示是否正在獲取資料。
refresh / execute
: 一個函數,可以用來重新執行handler
函數,回傳新的資料,類似重新整理、重打一次 API 的概念。預設情況下refresh()
執行完並回傳後才能再次執行。
error
: 資料獲取失敗時回傳的物件。
Nuxt3
是基於vite
製作的,拿法基本上一樣
env
資料夾,裡面新增.env.development
及.env.production
env
資料夾裡創建env.d.ts
nuxt.config.js
裡的vite
新增envDir: 你的env資料夾位置
webpack
或vite
定義環境變數的時候字串要加引號,Nuxt
不用,只要在env.d.ts
裡面定義好就好了,否則會拿不到只需記得,不能公開的金鑰或敏感訊息,會放置在
runtimeConfig
中的在app屬性內
可以設置讓 Nuxt 編譯建構時,一些不需要或忽略檔案。
提供服務運行時暴露給客戶端使用的設定,因此,請不要在 app.config.ts 檔案中添加任何機密資訊。