[指南] Nuxt3 腳本撰寫採坑記錄 @地瓜大的飛翔旅程

章節連結

隨著 Nuxt3 的正式版本上線，那就該來針對 Nuxt3 寫一個專屬於自己的範本，讓自己後續的專案能夠快速的引用。與 Nuxt2 相比，Nuxt3 有不小的改動，這邊筆記下撰寫時的採坑記錄。

內容

1. 使用 Mac M1 以後機型，會安裝到錯誤 esbuild 版本

這一點可以透過將你的 Node 大版本版號提升到至少 16 來解決。由於 Nuxt3 也有提及版本至少需要 16.11，所以將較為新的 Node 是必須的

2. ESLint

eslint 導入需要安裝 eslint @nuxtjs/eslint-config-typescript eslint-plugin-vue 這三個。同時檢查規則中需關閉 ‘vue/multi-word-component-names’: ‘off’ 和額外設定 vue/html-indent

3. Stylelint

stylelint 要根據你撰寫的 CSS 安裝相關的檢查工具。這邊以 scss 為例子：

postcss-html, sass, stylelint, stylelint-config-html, stylelint-config-recommended-scss, stylelint-config-standard

4. Pinia

Pinia 建議搭配 @pinia-plugin-persistedstate/nuxt 套件一起使用，可以讓狀態縱使重新整理後，仍會存在於 Cookie 或是 LocalStorage 中

5. vue-i18n

這個算是最為複雜的。vue-i18n 套件須作為一個 Plugin 在 server 端就自動引入，才能正常執行。因此在 client 端渲染時，必須要在 onmounted 再額外執行，才不會出錯。

[補充]：若你是用 Server-Side Rendering 並採用根據路徑是否帶有語系參數來決定顯示語言的，可以在 app.vue 中將語系設定同步到 pinia 中。

6. Axios 改用 ofetch

Nuxt3 改用 ofetch 套件進行包裝，成了一個可在 server 和 client 端運行的 API 串接方法。你會需要自行封裝，才能讓多個模組間能擁有相同底層 API 串接套件

按讚加入粉絲團