那就開始動工吧！

第一步：建立專案

先從最基本的專案初始化開始：

npm create vue@latest idle-game

建立時會看到以下選項：

┌  Vue.js - The Progressive JavaScript Framework
│
◆  請選擇要包含的功能： (↑/↓ 切換，空格選擇，a 全選，enter 確認)
│  ◼ TypeScript
│  ◻ JSX 支援
│  ◼ Router（單頁應用程式開發）
│  ◼ Pinia（狀態管理）
│  ◼ Vitest（單元測試）
│  ◼ 端對端測試
│  ◼ ESLint（錯誤預防）
│  ◼ Prettier（程式碼格式化）
└

建立專案完成後：

cd ./idle-game
npm install
npm run dev

接著打開 http://localhost:5173/，就能看到 Vue 專案成功跑起來了！

太好了，我們已經邁出成功的第一步！

加入tailwind css

安裝

npm install tailwindcss @tailwindcss/vite

在 vite.config.ts 加入設定：

// vite.config.ts
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
})

在 main.css 匯入：

@import "tailwindcss";

開發體驗優化

Tailwind CSS IntelliSense 擴充套件

透過提供自動完成、語法高亮與程式碼檢查等進階功能，讓我們在使用 Tailwind 時有更佳的體驗。

• Tailwind CSS IntelliSense 擴充套件功能
  1. 自動完成：智慧建議 utility classes、CSS 函數與指令
  2. 程式碼檢查：標記錯誤或潛在問題
  3. 懸停預覽：滑鼠停在類別上顯示對應的 CSS
  4. 語法高亮：正確標示 Tailwind 特有語法

自動排序 Tailwind 的 class

Tailwind 推出了官方的 Prettier plugin：prettier-plugin-tailwindcss，可自動整理 class 順序，避免手動調整。

1. 安裝為開發相依（dev-dependency）：

npm install -D prettier prettier-plugin-tailwindcss

2. 在 Prettier 的設定檔中加入這個 plugin：
   在 prettier.config.js 或 .prettierrc 裡指定

{
  "plugins": ["prettier-plugin-tailwindcss"]
}

清理預設內容

將 css、store、routers、views、components 資料夾中的範例檔案刪掉，保留乾淨的專案結構，這樣之後就能專注在遊戲開發。

結語

今天我們完成了專案的初始化，並且整合了 Tailwind CSS，
還把不需要的預設檔案清理乾淨，得到了一個乾淨的開發環境。
到這裡為止，整個基礎環境已經就緒，接下來就能專心開始遊戲功能的開發。

明日工事

1. 刻第一版 Layout：
   • 包含頁首、側邊欄與主要內容區
   • 奠定整個「遊戲頁面」的雛形
2. 專案公開到 GitHub：
   • 建立遠端 Repository
   • Push 專案並設定好 .gitignore
   • 方便版本控制，也讓後續能持續更新開發日誌