@trapar-waves/vue-tailwind

August 20, 2025 · View on GitHub

npm version npm downloads License Last commit CI Status Renovate

English | 中文 | Русский язык

迅速なフロントエンド開発のためのVue 3プロジェクトテンプレートで、Tailwind CSSと現代的な開発ツールが統合されています。

✨ 特徴

  • Vue 3: Vueの最新機能を活用してユーザーインターフェースを構築。
  • Tailwind CSS v4: ユーティリティファーストのCSSフレームワークによる迅速なUI開発。
  • TypeScript: 強力な型付けでコード品質と開発者体験を向上。
  • Rsbuild: 現代的なWeb開発のための高速で効率的なビルドツール。
  • @vueuse/core: 基本的なVueコンポジションユーティリティのコレクション。
  • Iconify 統合: Tailwind CSSでIconifyアイコンを簡単に使用。
  • ESLint & Antfu 設定: コードスタイルとベストプラクティスの強制。
  • PostCSS: 最適なTailwind統合のための@tailwindcss/postcssを使用。

💻 技術スタック

依存関係の完全なリストは package.json を参照してください。

🚀 クイックスタート

前提条件

  • Node.js (>= 18.x 推奨)
  • パッケージマネージャー (npm, yarn, または pnpm)
node -v
npm -v # または yarn -v / pnpm -v

プロジェクトの作成

テンプレートを使用して新しいプロジェクトを作成:

pnpm create trapar-waves

依存関係のインストール

プロジェクトディレクトリに移動して依存関係をインストール:

# npm を使用
npm install

# yarn を使用
yarn install

# pnpm を使用
pnpm install

開発

開発サーバーを起動:

# npm を使用
npm run dev

# yarn を使用
yarn dev

# pnpm を使用
pnpm dev

ビルド

プロダクションビルドを作成:

# npm を使用
npm run build

# yarn を使用
yarn build

# pnpm を使用
pnpm build

プレビュー

ローカルでプロダクションビルドをプレビュー:

# npm を使用
npm run preview

# yarn を使用
yarn preview

# pnpm を使用
pnpm preview

🧪 リンティング

ESLintでコードをチェック:

# npm を使用
npm run lint

# yarn を使用
yarn lint

# pnpm を使用
pnpm lint

🤝 コントリビュート

貢献は歓迎です！以下の方法で参加できます:

  1. リポジトリをフォーク
  2. 機能ブランチを作成 (git checkout -b feature/amazing-feature)
  3. 変更をコミット (git commit -m 'Add some amazing feature')
  4. ブランチにプッシュ (git push origin feature/amazing-feature)
  5. プルリクエストを開く

コードがプロジェクトのスタイルガイドに従い、すべてのテストに通過することを確認してください。

👤 作者

Rikka

📄 ライセンス

このプロジェクトはMITライセンスの下でライセンスされています - 詳細は LICENSE ファイルを参照してください。

🔗 リンク