フレームワークを用いて開発を進める以上、
そのディレクトリ・ファイルがどのような役割を果たすかしっかり理解することが大切だと考えています。

初期の構成は以下の通りになっております。

初期構成

.nuxt/

nuxt や nuxt build で自動的に生成されるファイルが格納
SSRの場合は必要なファイルの一部ですが、
SSGの場合はdistフォルダを使用するためここは不要扱い

※ 基本的に触らない

components/

Vue.jsコンポーネントを格納するディレクトリ

ページの様々な部分を構成するものであり、
ページやレイアウト、他コンポーネントで利用することができる

• ヘッダーやフッター
• メニュー
• list-itemなど

再利用することで複数ページで同じコンポーネントを使うことが可能です。

プロジェクトによってコンポーネントのファイル名の命名規則や粒度を決めておくことが重要です。

※ NuxtLogo.vueとTutorialは今回は不要なので削除してokです
※ コンポーネントについては次回以降説明します

node_modules/

このプロジェクト内で使用されているJavaScriptのパッケージが保存されています。

※ 基本的に触らない

pages/

ビューとルーティングの機能を持つ。

pages内で .vue ファイルを作成することで、自動的にルーティングされるようになります。

static/

nuxt build でWebpackでコンパイルされないファイル

サーバーのルート直下に配置されるファイルはこちら

store/

Vuexに関するファイルを格納
デフォルトでは無効化されており、index.jsに定義することで有効化される

必須ではなく、プロジェクトの要件に応じてvuexを導入するか決める必要がある

.editorconfig

コーディングルールの設定ファイル
インデント形式（スペースorタブ）やインデント数など

.eslintrc.js

ESLintの設定ファイル

nuxt.config.js

Nuxtの設定ファイル
デフォルト設定を上書きする形で設定を反映させる

SSRやSSGなどの動かし方の設定やheadタグの共通設定などはこちらで設定

Nuxt 設定ファイル

package.json

npmスクリプトのコマンドや依存しているJavaScriptパッケージのリストなど、
Nuxtプロジェクトを動かす際に必要な情報

devDependenciesとdependenciesについて

• devDependenciesは開発環境で使うパッケージ群
• dependenciesは本番環境で使うパッケージ群

dependenciesに開発環境で使うパッケージが入っていても動作はします。ですがWebpackによってバンドルされるファイルサイズが大きくなってしまうので分けたほうが良い

package-lock.json, yarn.lock

npmを使ってインストールした方はpackage-lock.json、
yarnを使った方はyarn.lockファイルが生成されたと思います。

これらはプロジェクトが依存しているパッケージの正確なバージョンを記録しているものです。

package-lock.jsonとyarn.lockの存在理由

追加するディレクトリ

assets/

Scssやコンポーネントで読み込みたい画像などはこちらに配置します

layouts/

default.vue を作成することでページの外観を構成するパーツを配置することができます。

どのページにも表示されるヘッダーやフッターコンポーネントは default.vue で呼び出すことで、HTMLの2度書きを防ぎます。

また、 error.vue を作成することで、ルーティング設定していないルートにアクセスされた場合、自動で error.vue を表示することができます。

plugins/

プロジェクト内での共通処理やライブラリの設定ファイルなどを定義するファイルの格納場所

自動生成されるディレクトリ

dist/

nuxt generate によって出力されたファイルが自動でこの中に格納される

※ 基本的に触らない

その他

その他にも middleware/ や api/ などがあります

assets or staticについて

基本的に両者ともにjsや画像などの置くためのディレクトリです。

明確な違いはWebpackを通すか通さないかです。

• assets/ はWebpackを通すため、コンパイルごとにファイル名が変更されます。

  そのため、キャッシュの影響を受けないためassets内で画像など変更した場合はその都度最新のものが表示されます。

  自動で圧縮したい画像やコンパイルが必要なScssファイルなどはこちらに置くと良いです。

• 一方 static/ はWebpackを通さないためそのままルート直下に配置されます。

  そのまま配置されるため毎回ファイル名が固定になります。

  faviconやsitemap.xmlなどはstaticに置くと良いです。

  また、圧縮済みの画像（OGPなど）もこちらに置くと良いです。