【Nuxt.js】フォルダの使い分け

Nust.jsのフォルダ/ファイル構造についてまとめ

ルートフォルダ
└ .nuxt
└ dist
└ assets
└ components
└ layouts
└ middleware
└ pages
└ plugins
└ static
　└ favicon.ico
└ store
└ package-lock.json
└ package.json
└ nuxt.config.js

.nuxt
Vue.jsのビルドコマンド(npm run dev または npm run build)を実行した際に、ビルド結果が出力されるフォルダ。

dist
Vue.jsのビルドコマンド(npm run generate)を実行した際に、ビルド結果(静的)が出力されるフォルダ。手作業での編集は禁止とする。

assets
複数ページに跨る画像ファイルやFontファイル のようなコンパイルされていないファイルを配置するフォルダ

components
各ページや部品ごとに分けた単一コンポーネントファイルを配置するフォルダ。

layouts
複数のページに共通するvueファイルを配置するフォルダ。（メニューバーなど）

middleware
ページレイアウトを描画するよりも前に実行されるカスタム関数を定義するファイルを配置するフォルダ。

pages
ページごとの見た目を記載するvueファイルを配置するフォルダ。

plugins
プラグインを配置するフォルダ。便利なプラグインが多くあるので、追加したい場合は下記などを参考に。
https://qiita.com/yfujii1127/items/cddf267a94fa30ecb0b8

static
直接サーバのルートに配置されるファイルを配置するフォルダ。
（/static/robots.txt は http://localhost:3000/robots.txt でアクセス可能）

store
Vuex ストア のファイルを配置するフォルダ。
Vuexは状態を一元管理できる

package-lock.json
package.jsonと同階層で 　*npm install*　を実行すると自動生成される

package.json
npmで管理するパッケージとそのバージョンを管理するためのファイル

nuxt.config.js
nuxtの基本設定を記載するファイル

以上ですーー！

今後、layoutsやstoreなど使い方の詳細を紹介できればと思います。

おやすみなさいぃぃぃ