今日任務

今天睡醒之後，眼前系統忽然跳出：

任務是完成第一關

請打造Re:Human網站的基礎建設

終於開始了，系統已經進入第一關

進度：5%/100%
* ✅ 故事脈絡
* ✅ 打造個人裝備+武器

個人裝備：
* ✅ Nuxt + TypeScript
* ✅ Tailwind CSS + daisyUI
* ✅ Netlify
* ✅ YouTube 語音轉文字

長老協助：
* ✅ Gemini

主線任務：
* □ 第一關

第一關

要使用 Nuxt 建立一個專案其實非常間單，但是 Nuxt 在 7/15 更新了全新的 4.0 版本，比之前的 3.x 有些微的不同，但是在安裝 Tailwind CSS + daisyUI 差異蠻大的。

Nuxt 4.0

Nuxt4.0 已經發佈，整個安裝方式與資料夾結構有稍微的不同。

建立 nuxt 4.0 專案:

npm create nuxt <project-name>

啟動專案:

cd <project-name>
npm run dev

瀏覽器開啟網址：http://localhost:3000/

安裝 tailwindcss

nuxt4.0 已經把 tailwindcss 當成內建模組，所以會以模組方式安裝:

npx nuxi@latest module add tailwindcss

安裝成功後，會自動在 nuxt.config.ts 設定 tailwindcss 模組:

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2025-07-15',
  devtools: { enabled: true },
  modules: ['@nuxtjs/tailwindcss']
})

安裝 daisyui

選對 UI 框架就是省事的第一步，daisyui 可以大幅減少 tailwindcss 的類別呼叫。

daisyui 對於 nuxt 來說還只是第三方套件，所以只能用手動安裝：

npm i -D daisyui@latest

新增 tailwind.config.js 文件:

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./nuxt.config.{js,ts}",
    "./app.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [require('daisyui')],
};

重整 Nuxt 資料夾結構

接下來直接開啟建立好的專案，重新整理一下路由的資料夾結構，先修改 app/app.vue:

<template>
  <NuxtPage />
</template>

然後要測試 daisyui 有沒有安裝成功，新增 app/pages/index.vue:

<template>
  <div class="p-8">
    <h1 class="text-3xl font-bold mb-4">歡迎使用 Nuxt 4 和 daisyUI！</h1>

    <button class="btn btn-primary">主要按鈕</button>
    <button class="btn btn-secondary">次要按鈕</button>

    <div class="card w-96 bg-base-100 shadow-xl mt-8">
      <figure><img src="https://img.daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.jpg" alt="Shoes" />
      </figure>
      <div class="card-body">
        <h2 class="card-title">鞋子！</h2>
        <p>如果我穿上這雙鞋，它會適合我嗎？</p>
        <div class="card-actions justify-end">
          <button class="btn btn-primary">立即購買</button>
        </div>
      </div>
    </div>
  </div>
</template>

重新啟動專案即可。

Netlify

要把整個 Nuxt 打包上傳到線上服務 Netlify，這裡必須使用中途之家 Github 來操作，只要更新到 Github，就會自動部署到 Netlify。

Github 的詳細操作過程就不多解釋了。

此時系統忽然跳出

已完成第一關任務

進度：8%/100%
* ✅ 故事脈絡
* ✅ 打造個人裝備+武器
* ✅ Gemini 長老協助
* ✅ 第一關

主線任務：
* ✅ 第一關完成

至此，《Re:Human》大門已開啟。

《Re:Human》網站

進度：8%/100%

https://rehuman.jkone.dev/

《Re:Human》—— 人類補完計劃，下集待續...