L00 ch01 — bun + Vite で Vue 環境構築

L00 ch01 — bun + Vite で Vue 環境構築

最初の 20 分で「動く環境」を作る

ゴール

• bun (または pnpm) と Vite で Vue プロジェクト作成
• HMR (Hot Module Reload) を体験
• npm パッケージ名衝突を回避

Step 1: bun インストール

brew install bun                     # macOS
curl -fsSL https://bun.sh/install | bash
bun --version  # 1.x.x

または pnpm:

brew install pnpm
pnpm --version

Step 2: Vue プロジェクト作成

bun create vite my-app -- --template vue-ts
cd my-app
bun install
bun run dev

➜ Local: http://localhost:5173/

ブラウザで localhost:5173 開く → Vue ロゴが見える

⚠️ 罠: フォルダ名

❌ 悪い例:

bun create vite vue  # フォルダ名 = "vue"
# → package.json の name に "vue" が入る
# → bun install で npm の vue パッケージと衝突

✅ 良い例:

bun create vite my-app -- --template vue-ts
bun create vite todo-app -- --template vue-ts

→ npm に存在するパッケージ名は避ける

Step 3: HMR (Hot Module Reload)

<!-- src/App.vue -->
<template>
  <p>Hello, Vue</p>  ← ここを書き換え
</template>

保存 → ブラウザが自動更新 (リロード不要)

→ Vite の最大の魅力

ファイル構成

my-app/
├── package.json
├── vite.config.ts
├── index.html       # エントリ HTML
└── src/
    ├── main.ts      # JS エントリ
    ├── App.vue      # ルートコンポーネント
    └── components/

drill

drill/ — 命名衝突を避けるパターン理解