Mar 08 2023

之前就在react做過不少next.js的開發，今天在做vue的第一步就是直接套用了nuxt，過程中只踩到一個小小的狀況，就是nuxt在終端機啟用的時候會有一個 ? Are you interested in participating? (Y/n)的問句，導致在nuxt啟動的時候一直在啟動的狀態，自己也在終端機中按下不少Y或是n，唯獨就沒有按下enter.... 這個部分真的是自己蠢導致的問題

在專案中的檔案結構，我通常喜歡把程式碼要放在src的資料夾中，當把app.vue放到src的資料夾中就會出現500的錯誤訊息， 主要是因為nuxt在建置時專案的目錄沒有app.vue與pages/*的頁面可以渲染，若app.vue跟pages/*的資料想要放在非專案的根目錄中， 就要在nuxt.config.ts(nuxt.config.js)加上srcDir的位置，他的預設值為專案的根目錄。

自己本身是tailwindcss的愛好者，所以在做練習時所用的css framework當然就是tailwindcss囉！這部分next.js的處理方式相差無幾 參照Tailwindcss nuxt的說明就可以完成了， 但個人偏好使用scss的方式所以多做了一些處理

初始化tailwindcss後，就要編輯tailwindcss.config.js的檔案，這邊分享一下自己初始設定

加入了tailwindcss.config.js後，要編輯nuxt.config.js檔案，使nuxt在偵錯或建置時會順變把tailwindcss的css產生處來。最後在app.vue的檔案中引入

vue+nuxt與react+next的layout設定比較不一樣，所以在這邊又上網看看別人是怎麼做的，vue的做法會建立一個layout的資料夾，然後建立一個layout.vue（或default.vue） 這樣的檔案，在app.vue使用時就會加入一個NuxtLayout，並指定layout檔案的名稱，這樣一來在pages/*的頁面就會自動套上了layout的設定，但如果需要每個頁面套用不同的layout要採取不同的設定

在寫vue跟react的差異是，vue會全部的自動import而react是要自己在加入，這樣的設計是好是壞我覺得要看一些情況，在新手上路的過程中的確滿舒服的

Tailwindcss Nuxt