ディレクトリ構造

デフォルトの Nuxt のアプリケーション構造は小規模なものから大規模なものまで両方のアプリケーションにとって素晴らしい出発点を提供することを目的としています。アプリケーションは自由に構成でき、必要に応じて他のディレクトリを作成することができます。


プロジェクトにまだ存在しないディレクトリとファイルを作成してみましょう。

mkdir components assets static
touch nuxt.config.js

これらは Nuxt アプリケーションを構築する際に使用する主なディレクトリとファイルです。それぞれについての説明は後述します。

これらの名前のディレクトリを作成することで、Nuxt プロジェクトの機能を利用できるようになります。

ディレクトリ

pages ディレクトリ

pages ディレクトリにはアプリケーションのビューとルートが含まれています。前の章で学んだように、Nuxt はこのディレクトリ内の .vue ファイルをすべて読み込み、アプリケーションのルーターを作成します。

components ディレクトリ

components ディレクトリにはページにインポートするすべての Vue.js のコンポーネントファイルを入れます。

Nuxt を使用すると、作成したコンポーネントを .vue ファイルに自動でインポートすることができます。(訳注: nuxt.config.js 内の)components を true に設定すると、Nuxt がスキャンして自動でインポートしてくれます。

assets ディレクトリ

assets ディレクトリにはスタイルや画像、フォントなどコンパイルされていないアセットを入れます。

static ディレクトリ

static  ディレクトリは直接サーバのルートに配置され、名前を保持しなければいけないファイル(例えば robots.txt) または 変更されない可能性の高いファイルが含まれています(例えば、favicon など)。

nuxt.config.js ファイル

nuxt.config.js ファイルは Nuxt の設定を行う唯一の場所です。モジュールの追加やデフォルトの設定を上書きしたい場合にここで変更を適用します。

package.json ファイル

package.json ファイルには、アプリケーションのすべての依存関係とスクリプトが含まれています。

プロジェクト構造についての詳細

content layouts middleware modules plugins そして store など、さらに役立つディレクトリやファイルがあります。これらは小規模なアプリケーションには必要ないのでここでは説明しません。

このページをGitHubで編集する 更新日 Thu, Oct 21, 2021