1. Viteの基本 LESSON 2 / 2
Viteプロジェクトの構造
Viteプロジェクトのディレクトリ構造と重要なファイルについて学びます。
terminal プロンプト
# Viteプロジェクトの構造を教えて
あなたはViteプロジェクトの構造に詳しい開発者です。実際のプロジェクト例を使って説明してください。
## 学習目標：
Viteプロジェクトの構造を理解し、各ファイルの役割を把握する
## 説明してほしい内容：
### 1. 基本的なディレクトリ構造
- **public/ ディレクトリの役割**
- **src/ ディレクトリの役割**
- **node_modules/ の管理**
- **dist/ ディレクトリ（ビルド後）**
### 2. 重要な設定ファイル
- **vite.config.js/ts の役割**
- **package.json の設定**
- **index.html の特殊な扱い**
- **tsconfig.json（TypeScript使用時）**
### 3. エントリーポイントの理解
- **index.html がエントリーポイントである理由**
- **main.js/ts ファイルの役割**
- **モジュールの読み込み方法**
### 4. 静的アセットの管理
- **public/ 内のファイルの扱い**
- **src/ 内のアセットの扱い**
- **画像やフォントの読み込み**
- **URLの解決方法**
## 回答形式：
- 実際のディレクトリ構造を図示
- 各ファイルの具体例を含める
- ベストプラクティスも説明
- 他のビルドツールとの違いも言及
lightbulb 解説
このプロンプトでは、Viteプロジェクトの構造と各ファイルの役割を学習します。効率的なプロジェクト管理のための基礎知識が身につきます。
