ディレクトリ構造
デフォルトの Nuxt のアプリケーション構造は小規模なものから大規模なものまで両方のアプリケーションにとって素晴らしい出発点を提供することを目的としています。アプリケーションは自由に構成でき、必要に応じて他のディレクトリを作成することができます。
プロジェクトにまだ存在しないディレクトリとファイルを作成してみましょう。
mkdir components assets static
touch nuxt.config.js
これらは 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 など、さらに役立つディレクトリやファイルがあります。これらは小規模なアプリケーションには必要ないのでここでは説明しません。