ディレクトリ構成

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

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

mkdir components assets static
touch nuxt.config.js

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

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

ディレクトリ

pages ディレクトリ

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

pages ディレクトリについてより理解する

components ディレクトリ

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

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

components ディレクトリについてより理解する

assets ディレクトリ

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

assets ディレクトリについてより理解する

static ディレクトリ

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

static ディレクトリについてより理解する

nuxt.config.js ファイル

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

nuxt.config.js ファイルについてより理解する

package.json ファイル

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

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

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

すべてのディレクトリについての詳細はディレクトリ構造のドキュメントを参照してください。

Contributors

間違いを見つけた、またはドキュメントに貢献したいですか? GitHub でこのページを編集する