Mar 08 2023

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

1yarn run v1.22.19
2$ nuxi dev
3                                                                                         11:27:10
4Nuxi 3.2.3                                                                               11:27:10
5Nuxt 3.2.3 with Nitro 2.2.3                                                              11:27:10
6                                                                                         11:27:10
7  > Local:    http://localhost:3000/
8  > Network:  http://172.18.75.79:3000/
9
10                                                                                         11:27:10
11ℹ Nuxt collects completely anonymous data about usage.                                   11:27:10
12  This will help us improve Nuxt developer experience over time.
13  Read more on https://github.com/nuxt/telemetry
14
15                                                                                         11:27:10
16? Are you interested in participating? (Y/n)                                             11:27:10
17                                                                                         11:27:10
18                                                                                         11:27:10
19

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

1// nuxt.config.ts
2export default {
3    srcDir:'./src'
4}
5

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

1yarn add -D tailwindcss postcss autoprefixer sass
2npx tailwindcss init
3
4

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

1// tailwindcss.config.js
2module.exports = {
3  content: [
4      './src/**/*.{js,ts,jsx,tsx,vue}'
5  ],
6  theme: {
7    extend: {},
8  },
9  plugins: [],
10}
11

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

1export default {
2    css: ['~/assets/tailwindcss.scss'],
3    postcss: {
4        plugins: {
5            tailwindcss: {},
6            autoprefixer: {},
7        },
8    },
9}
10

1// app.vue
2<style lang="scss">
3@import "./assets/tailwindcss.scss";
4</style>
5

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

1// default.vue
2<template>
3  <div class="bg-amber-600 py-2">
4    <slot name="header" />
5    <slot />
6    <slot name="footer" />
7  </div>
8</template>
9
10// app.vue
11<template>
12  <NuxtLayout name='default'>
13    <NuxtLoadingIndicator />
14    <NuxtPage />
15  </NuxtLayout>
16</template>
17

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

Tailwindcss Nuxt