Vue3 ディレクトリ構造

前の章では npm を使用してプロジェクトをインストールしました（Vue-cli と Vite）。IDE（Vscode、Atom など）でそのディレクトリを開くと、構造は以下のようになります。

コマンドラインツール vue-cli（サンプル-vue3-test）：

Vite（サンプル-vue3-test2）

標準的な Vue 3 プロジェクトは、通常3つの階層に分けられます：

  • プロジェクトルートディレクトリ：ビルドツールとプロジェクト構成
  • public ディレクトリ：ビルドに参加しない静的リソース
  • src ディレクトリ：ほぼすべてのビジネスコードがここにあり、普段の開発は基本的にこのディレクトリ内で行います。

典型的な Vue プロジェクト構造：

vue-project/
├── public/                  # 静态资源，直接复制到构建输出目录
│   └── favicon.ico          # 网站图标
├── src/
│   ├── assets/              # 静态资源（如图片、字体、CSS）
│   │   └── logo.png
│   ├── components/          # 可复用的通用组件
│   │   └── CommonHeader.vue
│   ├── composables/         # 可复用的 Composition API 逻辑（可选）
│   │   └── useFetch.js
│   ├── router/              # 路由配置
│   │   └── index.js
│   ├── stores/              # Pinia 状态管理（或 store/ 用于 Vuex）
│   │   └── index.js
│   ├── utils/               # 工具函数（如请求封装、格式化）
│   │   └── request.js
│   ├── views/               # 页面级组件（对应路由页面）
│   │   ├── HomeView.vue
│   │   └── AboutView.vue
│   ├── App.vue              # 根组件
│   └── main.js              # 入口文件（创建 Vue 应用）
├── index.html               # HTML 入口模板
├── vite.config.js           # Vite 配置文件
├── package.json             # 项目依赖与脚本
├── .gitignore               # Git 忽略文件
├── .env                     # 环境变量（开发）
├── .env.production          # 环境变量（生产）
└── README.md                # 项目说明

ディレクトリ解説

パス 説明
public/ ビルドツールで処理されない静的リソースを置きます。dist ディレクトリに直接コピーされ、主に favicon、robots.txt などに使用されます。
public/favicon.ico サイトアイコン（favicon）
src/ プロジェクトのソースコードのメインディレクトリで、すべての開発コードをここに置きます。
src/assets/ 画像、フォント、グローバル CSS などの静的リソースを置きます。Vite で処理されます（インポート対応）。
src/components/ 再利用可能な汎用コンポーネント（ボタン、カード、レイアウトコンポーネントなど）を置きます。
src/composables/ 再利用可能な Composition API ロジック関数を置きます（Vue 3 推奨のコード再利用方法）。
src/router/ Vue Router 設定ディレクトリ。通常 index.js にルーティングテーブルを定義します。
src/stores/ Pinia 状態管理ディレクトリ（Vue 3 公式推奨）。各 store モジュールを置きます。
src/utils/ ユーティリティ関数（axios ラッパー、日付フォーマット、定数など）を置きます。
src/views/ ページレベルのコンポーネントを置きます。通常ルートと1対1で対応します（ルートページ）。
src/App.vue Vue アプリケーションのルートコンポーネントです。以下を含みます：<router-view>などのエントリレンダリングポイント
src/main.js プロジェクトのエントリファイルです。Vue アプリケーションインスタンスを作成し、プラグイン（router、pinia など）をマウントして #app にマウントします。
index.html HTML テンプレートファイルです。以下を含みます：<div></div>マウントポイント
vite.config.js Vite ビルドツール設定ファイルです。プラグイン、エイリアス、プロキシなどをカスタマイズできます。
package.json プロジェクトの依存関係、スクリプトコマンド（dev、build、preview など）
.gitignore Git の無視ファイルです。通常 node_modules、dist、.env などを無視します。
.env / .env.production 環境変数ファイルです。異なる環境で API アドレスなどを設定するために使用します（Vite では VITE_ で始まる変数）。
README.md プロジェクト説明ドキュメント

プロジェクトが大きくなるにつれて、以下のフォルダを追加する必要があるかもしれません：

  • src/layouts/：異なるページレイアウト（例：AdminLayout.vue、GuestLayout.vue）。
  • src/plugins/：カスタム Vue プラグイン（例：グローバルコンポーネントの自動登録）。
  • src/directives/：カスタムディレクティブ（例：v-loading）。
  • src/types/：グローバル TypeScript 型定義。
  • tests/ 或 tests/：ユニット/E2E テスト（Vitest + Vue Test Utils）。
  • src/api/：API 呼び出しモジュールを分離（utils/request よりも細かい粒度）。

次に、サンプル-vue3-test2 を例として、ディレクトリ内の src/APP.vue ファイルを開きます。コードは以下のとおりです（説明はコメント内にあります）：

src/APP.vue ファイルコード

<!-- 表示テンプレート -->
<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Hello Vue 3.0 + Vite" />
</template>
<!-- Vue コード -->
<script>
/* src/components/HelloWorld.vue から HelloWorld コンポーネントをインポート */
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

次に、初期化されたプロジェクトを変更してみましょう。src/APP.vue を以下のコードに変更します：

src/APP.vue ファイルコード

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="サンプルへようこそ！" />
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

ページを開くhttp://localhost:3000/、通常、変更後は自動的にリフレッシュされ、表示は以下のようになります：

その他の拡張