Nuxt3 學習筆記

20230626 補充

推薦幾個我發現的好一點的博客
1： 楊村長做的nuxt3系列教程
2：kapo [e-mail]總結的一系列入門教程

前言

nuxt3 是 vue3 的服務端渲染封裝庫。花了一天時間研究了一下，現在做如下總結

學習前提

1. 懂一點 nodejs 知識
2. 懂一點 vue3 知識
3. 會用 npm 工具

正文

1. nuxt3 在開發過程中，多數都是基於約定的開發模式，既: 根目錄創建一個 pages 目錄，根目錄創建一個 servers 目錄這些，都是約定好的。只需要按約定的規則開發即可
2. nuxt3 開發過程中，有兩個概念：服務端執行，客戶端執行，一定要區分清楚，這里可以參考：關於 nuxt 生命周期, 里面內容是nuxt2的概念，但是也可以用來理解 nuxt3
3. nuxt3 服務端渲染時，僅僅是瀏覽器加載的第一個頁面是服務端渲染，在加載完成的頁面繼續操作（比如路由跳轉），則和vue的單頁面渲染邏輯是一樣的了。這一點用來理解服務端渲染特別重要。
4. 服務端執行的生命周期是setup，在客戶側，setup生命周期依然會再次執行一次。【僅限於首次加載的頁面】【這里可以多看一些將 什么情況下會觸發服務端渲染的文章】
5. 認真看 nuxt3 官網 https://v3.nuxtjs.org/docs/usage/data-fetching,仔細理解里面的概念，不懂英文的直接用瀏覽器工具翻譯成中文
6. nuxt3 會自己起一個 server 服務器。
7. nuxt3 可以用 pm2 管理進程。目前 pm2 功能已經很強大了。值得學習。
8. nuxt3 項目如果需要第三方服務器做數據交互，有兩種方式
   1. 頁面（vue） 使用https://v3.nuxtjs.org/docs/usage/data-fetching方法> 第三方服務器 【可能出現跨域問題】
   2. 頁面 （vue） 同上> nuxt3自帶server $fetch方法> 第三方服務器
9. nuxt3 中使用了 https://github.com/unjs/ohmyfetch 這個庫發送 http 請求 【如果在server端發送請求，則沒有跨域問題】
10. nuxt3 的配置文件 nuxt.config.js 很重要，不過配置成功后很少去改動 配置文件文檔
11. 根目錄下的 app.vue 是整個頁面的入口。里面的內容全局共享
12. nuxt3 修改頁面的標簽圖標 icon有兩個入口
    1. nuxt.config.js配置meta
    2. 使用內置標簽
13. nuxt3 修改頁面 title 方法： 使用 內置 <Title> 標簽
14. nuxt3 NuxtLink 標簽必須帶 to 屬性，不然編譯不過
15. nuxt3 NuxtLink 標簽激活后會自動添加兩個 class 樣式：router-link-active:匹配路由， router-link-exact-active：完全匹配路由

server篇

1. nuxt3 server 目錄下有兩個目錄會自動導入，但是僅限於一級目錄(2021-12-27，有可能是 bug)，超過一級目錄都不生效
2. api 目錄
3. middleware 目錄
4. nuxt3 server/api 目錄里的文件名必須小寫，否則不生效(2021-12-27，有可能是 bug)

常見問題記錄

1. 如何在控制太打印服務端日志：配置文件中有一個 logLevel:"verbose", 配置項，配置后就可以看到console.log的打印了，其中編譯器里的打印是服務端執行時的打印，客戶端執行時的打印需要在瀏覽器的控制台中查看
2. 如何判斷當前當前是服務端還是客戶端

 if(process.server){
    console.log("這里是 服務端")
}else{
    console.log("這里是 客戶端")
}

總結

以上就是這一天的勞動成果，特此記錄一下。目前寫了一個比較完整的 demo 代碼，如果有需求，請到這里下載http://shop.sizhuiit.com, demo 下載不了或者有 需要幫助的，加 QQ 聯系：327896777