2025-05-10 MVP 階段的安裝清單

發表於 分類於 閱讀次數：
2025-05-10 MVP 階段的安裝清單

2025-05-10 MVP 階段的安裝清單

太好了 👍 我幫你整理一份「MVP 階段安裝清單」，這份清單只放 必要的東西，讓你可以最快速開始做心理＋算命網站，不會浪費電腦效能，也不會卡在安裝麻煩工具上。

🚀 MVP 階段安裝清單（Windows 主力機）

1. 基本工具

✅ Node.js LTS

  • 官網下載 LTS（長期支持版），穩定可靠。

  • 安裝後檢查：

    1
    2
    node -v
    npm -v

✅ Visual Studio Code

  • 主力開發編輯器。

  • 推薦外掛：

    • Volar（Vue 3 支援）
    • Tailwind CSS IntelliSense
    • ESLint
    • Prettier（程式碼自動排版）

✅ Git

  • 管理程式碼，未來要連 GitHub。

  • 檢查：

    1
    git --version

✅ 瀏覽器（至少 2 個）

  • Chrome（主力）
  • Edge 或 Firefox（交叉測試用）

2. Vue 專案環境

✅ Vite + Vue 3

  • 建立新專案：

    1
    2
    3
    4
    npm create vite@latest my-app -- --template vue
    cd my-app
    npm install
    npm run dev

✅ Tailwind CSS

  • UI 設計，安裝指令：

    1
    2
    npm install -D tailwindcss postcss autoprefixer
    npx tailwindcss init -p

  • 在 tailwind.config.js 加入：

    1
    content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"]

  • 在 src/index.css 加：

    1
    2
    3
    @tailwind base;
    @tailwind components;
    @tailwind utilities;

3. 測試流程

✅ 在手機測試 RWD

  1. Windows 開 npm run dev -- --host
  2. 找出 Windows IP（cmd → ipconfig，找 IPv4，例如 192.168.1.10）
  3. 手機同一 Wi-Fi，瀏覽器打 http://192.168.1.10:5173

✅ Mac 的角色

  • 用 Safari 測試網站相容性
  • 平常查資料、寫文件（避免主機太卡）

4. 部署（最簡單方式）

✅ Vercel 或 Netlify（免費）

  • 把程式 push 到 GitHub
  • Vercel/Netlify 直接綁定 GitHub，一鍵部署
  • 自動生成網址，朋友手機也能用

🔑 總結

👉 MVP 階段，你只需要：
Node.js + VS Code + Git + 瀏覽器
就能開始做心理＋算命網站了。
Docker、WSL2、資料庫 → 等你進入「後端學習」再加。

要不要我幫你做一份 「心理＋算命網站 MVP 功能表」（列 3～5 個最小功能，讓你依清單實作）？

很好 👍 你已經把 VS Code 裝好，接下來要安裝外掛（Extensions）。步驟如下：

🔹 安裝 VS Code 外掛的方法

  1. 打開 VS Code。
  2. 左邊工具列找到 Extensions（擴充功能），圖示像一個方塊拼圖。
  3. 在搜尋框輸入外掛名稱 → 按 Install 安裝。

🔹 建議安裝的外掛

  1. Volar（Vue 3 支援）

    • 搜尋：Volar
    • 安裝後就能得到 Vue 3 的語法提示、錯誤檢查。
    • ⚠️ 如果之前有安裝 Vetur，記得先移除（Vetur 是給 Vue 2 的）。

  2. Tailwind CSS IntelliSense

    • 搜尋：Tailwind CSS IntelliSense
    • 功能：打 class 時會自動提示（例如 bg-...、text-...）。

  3. ESLint

    • 搜尋：ESLint
    • 功能：幫你檢查程式碼是否符合規範，避免 bug。
    • 安裝後，建議在專案裡也安裝 ESLint 套件（之後我可以教你）。

  4. Prettier - Code formatter

    • 搜尋：Prettier
    • 功能：自動排版程式碼（按下 右鍵 → Format Document，或存檔時自動排版）。

✅ 安裝完這些外掛後，你的 VS Code 就能支援 Vue 3 + TailwindCSS + 自動排版 + 程式碼檢查。
⚡ 建議安裝順序：
先 Volar → 再 Tailwind CSS IntelliSense → 然後 ESLint → 最後 Prettier。

要不要我幫你設計一個 第一個 Vue + Tailwind 心理測驗小程式，讓你可以馬上測試這些外掛有沒有正常運作？