🍃

Apple Silicon Macで始める Vue 3超入門 ―― Viteで秒速 Hello World

に公開
JavaScript
Vue.js
macOS
Vite
web開発入門
tech

― “最新 Vite” で最短 Hello World！

1. 事前準備（5 分）

ツール 推奨バージョン インストール例
Homebrew 最新 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
Node.js 20 LTS brew install node（Apple Silicon 用バイナリなので Rosetta 不要）
Yarn または npm 任意（どちらか） -

2. “一撃ひな形” —— create-vite で新規プロジェクト

# 好きな作業ディレクトリへ
cd ~/Projects   # ←任意

# Vite の公式スキャフォールドを実行
npm create vite@latest my-vue-app -- --template vue

# 依存をインストール
cd my-vue-app
npm install

コマンドが終わると my-vue-app/ に Vue 3 + Vite の 最新版テンプレが自動セットアップ済み🎉

3. サーバー起動 → Hello World を確認

npm run dev

ターミナルに表示された URL （通常 http://localhost:5173）を開くと、
Vue のロゴとカウンター付き Hello World 画面が出れば成功です 🥳

4. ビルド & 配布用ファイル生成（参考）

npm run build   # → dist/ フォルダに静的ファイル一式

生成物は Nginx / GitHub Pages / Firebase Hosting などそのまま配置できます。

5. まとめ 🎯

  1. Node 20 LTS を Homebrew で入れる
  2. npm create vite@latest 一発で Vue 3 プロジェクト完成
  3. npm run dev → 保存するだけでブラウザ即反映
  4. ビルドは npm run build —— 設定いじりは後で OK

Discussion