mcpField
V
vite-vue

vite-vue

github.com/rebyteai-template開発1775 回インストール19 週間前に更新
リポジトリ

vite-vue について

Vite 7 と TypeScript を使って Vue 3.5 アプリを構築するためのテンプレートです。ホットモジュール置換に対応した開発サーバーと、本番ビルドの設定を備えています。

主な機能

  1. 01Vue 3.5 と TypeScript
  2. 02Vite 7 開発サーバー
  3. 03ホットモジュール置換
  4. 04ビルド前の型チェック
  5. 05Vercel と Netlify のデプロイ手順

活用シーン

  1. 01Vue 3.5 プロジェクトの開始
  2. 02ローカルの HMR サーバーでの開発
  3. 03デプロイ可能な静的サイトのビルド

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/rebyteai-template/rebyte-skills --skill vite-vue

インストール後、Claude Code で/vite-vueを入力して読み込まれたか確認します。

詳細

Vite Vue テンプレート

Vite 7 と TypeScript を使用した、超高速な Vue 3.5 開発環境です。

技術スタック

  • フレームワーク: Vue 3.5
  • ビルドツール: Vite 7
  • 言語: TypeScript
  • パッケージマネージャー: npm
  • 出力先: dist ディレクトリ
  • 開発ポート: 5173

セットアップ

1. テンプレートをクローンする
git clone --depth 1 https://github.com/Eng0AI/vite-vue-template.git .

ディレクトリが空でない場合：

git clone --depth 1 https://github.com/Eng0AI/vite-vue-template.git _temp_template
mv _temp_template/* _temp_template/.* . 2>/dev/null || true
rm -rf _temp_template
2. Git の履歴を削除する（任意）
rm -rf .git
git init
3. 依存関係をインストールする
npm install

ビルド

npm run build

ビルドの前に Vue の TypeScript コンパイルが実行されます（vue-tsc -b && vite build）。

デプロイ

Vercel（推奨）
vercel pull --yes -t $VERCEL_TOKEN
vercel build --prod -t $VERCEL_TOKEN
vercel deploy --prebuilt --prod --yes -t $VERCEL_TOKEN
Netlify
netlify deploy --prod --dir=dist

開発

npm run dev

HMR が有効な状態で http://localhost:5173 にアクセスできます。<script setup> 構文を使用した単一ファイルコンポーネント（SFC）を使用します。

コメント

Markdown 対応