Nuxt.js ディレクトリ構成を理解する

Nuxt.jsでインストール時に生成されるディレクトリ構成についてまとめたいと思います。

assets ディレクトリ

画像やSASSファイルなどコンパイルされていないファイルを格納します。

イメージはホームページのimagesフォルダやSASSフォルダに近い使い方ができます。

例)
assets
├ images
└ sass

components ディレクトリ

ページで使うコンポーネントを格納します。

UIやパーツ、モジュールといった言い方もできます。色んなページで使う部品を集めておくイメージですね。

同じ形のボタンなのに、同じソースを何度も書くのは面倒だよね。それに変更があったら、全部書き直す必要があるよね。といった問題を解決してくれます。

dist ディレクトリ

静的出力されたファイルが格納されます。

触ることはほとんどないと思います。

layouts ディレクトリ

ページのテンプレートパターンを格納します。

レイアウトと言われるとヘッダーやフッターのイメージがありますが、トップページ、記事ページ、一覧ページ、404ページなどテンプレートを格納するといった使い方が近いです。

middleware ディレクトリ

ページで使用する関数を格納します。

ここは勉強中なので後日記述します。

pages ディレクトリ

ページで出力するファイルを格納します。

一番触ることが多いディレクトリだと思います。

実際にここで格納されているファイルがページとして出力されます。

plugins ディレクトリ

ここは勉強中なので後日記述します。

static ディレクトリ

ドメインのルートに設置するファイルを格納します。

例)
favicon.png
robots.txt
など

参考サイト

ディレクトリ構成 – NuxtJS

  • このエントリーをはてなブックマークに追加

プロフィール

kura

WEBで食べていきたいデザイナーです。 趣味でアプリ開発(ペア、デザイン担当)やNuxt.jsやらをいじってますが、やばいな~と感じつつネットの波に取り残されないようにワカッタこと、キヅイタことをカキカキします。