傑克 IT 誌 - Vibe Coding 001

專案建立

建立一個 Nuxt 專案:

npx nuxi init my-nuxt-app

安裝相關套件:

cd my-nuxt-app
npm install

啟動專案:

npm run dev

即可在瀏覽器開啟 http://localhost:3000

安裝 tailwindcss 套件

安裝 tailwindcss 4 套件:

npm install tailwindcss @tailwindcss/vite

在專案的 nuxt.config.ts 修改為:

import tailwindcss from '@tailwindcss/vite'

export default defineNuxtConfig({
  compatibilityDate: '2024-11-01',
  devtools: { enabled: true },
  vite: {
    plugins: [
      tailwindcss(),
    ]
  },
  css: ['~/assets/css/main.css']
})

新增 assets/css/main.css 檔案:

@import "tailwindcss";

可以在 app.vue 測試是否安裝成功:

<h1 class="text-3xl font-bold underline">
    Hello world!
</h1>

調整結構

app.vue

<template>
  <div>
    <NuxtPage />
  </div>
</template>

pages/index.vue

<template>
  <div>
    <h1>Welcome to your Nuxt Application</h1>
  </div>
</template>

規格撰寫

新增一個 spec.md，加入規格:

# 頁面結構

技術文件部落格

## 功能要求

可以瀏覽技術文件

## 實現檔案

- 主頁面元件: pages/001/index.vue
    - 將 pages/001/001.md 所有內容直接轉換成 html，呈現在頁面上
    - 不需要使用 md 套件，請直接轉成 html 即可

## 備註

- 使用 tailwindcss 排版

Prompt指令:

根據 spec.md 的規格內容產生對應程式碼即可