Nuxt.js ディレクトリ構成を理解する
Nuxt.jsでインストール時に生成されるディレクトリ構成についてまとめたいと思います。
assets ディレクトリ
画像やSASSファイルなどコンパイルされていないファイルを格納します。
イメージはホームページのimagesフォルダやSASSフォルダに近い使い方ができます。
例）
assets
├ images
└ sass
components ディレクトリ
ページで使うコンポーネントを格納します。
UIやパーツ、モジュールといった言い方もできます。色んなページで使う部品を集めておくイメージですね。
同じ形のボタンなのに、同じソースを何度も書くのは面倒だよね。それに変更があったら、全部書き直す必要があるよね。といった問題を解決してくれます。
dist ディレクトリ
静的出力されたファイルが格納されます。
触ることはほとんどないと思います。
layouts ディレクトリ
ページのテンプレートパターンを格納します。
レイアウトと言われるとヘッダーやフッターのイメージがありますが、トップページ、記事ページ、一覧ページ、404ページなどテンプレートを格納するといった使い方が近いです。
middleware ディレクトリ
ページで使用する関数を格納します。
ここは勉強中なので後日記述します。
pages ディレクトリ
ページで出力するファイルを格納します。
一番触ることが多いディレクトリだと思います。
実際にここで格納されているファイルがページとして出力されます。
plugins ディレクトリ
ここは勉強中なので後日記述します。
static ディレクトリ
ドメインのルートに設置するファイルを格納します。
例）
favicon.png
robots.txt
など
