vitesse

Vitesseは、Anthony Fuによって作成された、ViteとVue 3でWebアプリケーションを構築するための、非常に意見が反映されたスターターテンプレートです。設定に時間を費やすことなく、アイデアをすぐに動作するアプリに変えられるよう、高速で事前設定された環境を提供することを目的としています。このテンプレートは、pnpm、esbuild、Viteなどの最新ツールを活用し、スピードを重視して設計されており、厳選された機能とプラグインが標準で含まれています。 **主な機能** - **Vue 3 + Vite**: 最新のVue 3とViteを基盤とし、高速な開発とビルド時間を実現。 - **ファイルベースのルーティング**: `unplugin-vue-router`を使用し、`src/pages`ディレクトリから自動的にルートを生成。 - **自動インポート**: コンポーネント、API（Composition APIなど）、アイコンが自動インポートされ、ボイラープレートコードを削減。 - **状態管理**: 直感的で型安全な状態管理を提供するPinia。 - **レイアウトシステム**: `vite-plugin-vue-layouts`による複数レイアウトのサポート。 - **PWAサポート**: `vite-plugin-pwa`を統合し、プログレッシブWebアプリ機能を実現。 - **スタイリング**: オンデマンドのアトミックCSSを即時生成するUnoCSS。Iconifyを介して任意のアイコンセットをサポート。 - **国際化**: `unplugin-vue-i18n`を使用したVue I18nによる多言語サポート。 - **Markdown**: `unplugin-vue-markdown`を使用してMarkdownをVueコンポーネントとして記述可能。Shikiによるシンタックスハイライト付き。 - **SSG**: `vite-ssg`による静的サイト生成。`beasties`を使用したクリティカルCSSの最適化。 - **テスト**: ユニットテスト用のVitestとE2Eテスト用のCypress。GitHub Actionsと統合。 - **TypeScript**: 完全なTypeScriptサポート。 - **デプロイ**: Netlifyへのゼロ設定デプロイ、および本番ビルド用のDockerサポート。 **プリインストールされたプラグイン** - Vue Router、Pinia、VueUse、ヘッド管理用のUnhead、開発者体験向上のための`vite-plugin-vue-devtools`。 - `@antfu/eslint-config`を使用したESLintによるコーディングスタイルの強制（シングルクォート、セミコロンなし）。 - Vite、Volar、Iconify IntelliSense、i18n Ally、ESLint用のVS Code拡張機能を推奨。 **バリエーション** このテンプレートは、コミュニティがメンテナンスするいくつかのバリエーションを生み出しました。以下を含みます： - `vitesse-lite`: 軽量バージョン。 - `vitesse-nuxt3`: Nuxt 3用。 - `vitesse-webext`: ブラウザ拡張機能用。 - `vitesse-ssr-template`: SSRサポート付き。 - `vitailse`: TailwindCSS付き。 - `vitesse-h5`: モバイルアプリ用。 - `vitesse-solid`: SolidJS用。 **使用方法** - **開発**: `pnpm dev`を実行し、`http://localhost:3333`にアクセス。 - **ビルド**: `pnpm build`を実行し、`dist`フォルダを生成。 - **デプロイ**: リポジトリを接続してNetlifyにデプロイするか、`docker buildx build . -t vitesse:latest`でDockerを使用し、`docker run --rm -it -p 8080:80 vitesse:latest`で実行。 **注意**: 作者は、Vueの開発者体験が優れ、メンテナンスがより一貫しているため、新規プロジェクトにはNuxtの使用を推奨しています。Vitesseは初期のVite/Vue 3移行期のものであり、更新が遅い可能性があります。ただし、学習用や、この意見が反映された設定に合致するプロジェクトには、堅牢なリファレンスとして残っています。 **カスタマイズのチェックリスト** テンプレートを使用する際は、`LICENSE`の作者名、`App.vue`のタイトル、`vite.config.ts`のホスト名、`public`のファビコンを更新し、`.github`フォルダを削除し、READMEとルートをクリーンアップしてください。 全体として、Vitesseは、スピードと開発者体験に焦点を当てた、Vue 3アプリ向けの包括的で意見が反映されたセットアップを求める開発者にとって、強力で機能豊富なスターターです。