Vue.jsベースのフレームワーク！ Nuxt3入門《フォルダ階層説明》

#プログラム #JavaScript #Nuxt.js #Vue.js

記事をシェア：

コピー

こんにちは、樋口です。

今回は、Nuxt3で作成したプロジェクトの各構成について説明していきます。初期のプロジェクト作成では生成されず、自身で作成する必要があるため、必要なものを作成し整えていきましょう。

プロジェクト構成

Nuxt3でのプロジェクトの生成については、以下のブログを参照してください。
Vue.jsベースのフレームワーク！ Nuxt3入門《新規プロジェクトの作成》

早速下記に生成段階でのプロジェクト構成を記載します。

次に実装にあたり、必要となるフォルダについて最終的なフォルダ階層を記載します。

次項より、実装に必要なフォルダやファイルの説明をしていきます。

ファイル/フォルダの説明

下記に各フォルダとファイルの簡単な説明を記載していきます。

nuxt: コンパイルを実行した際に生成されるフォルダとなります。
assets: コンパイルが”行われていない”、「sass」や「Font」などのファイルを保存
components: Vue.js のコンポーネントファイルを入れます。これらのコンポーネントは、「asyncData」や「fetch」を使えません。
layouts: アプリケーションのレイアウトを格納します。ページの外観を変更するために使用されますファイルとなります。（例えばサイドバーなど）
middleware: アプリケーションのミドルウェアを入れます。ミドルウェアを使って、ページやページグループ（レイアウト）をレンダリングするよりも前に実行されるカスタム関数を定義できます。
node_modules: プロジェクトで使用される、JavaScriptのパッケージが保存されています。
pages: アプリケーションのビュー及びルーティングファイルを入れます。.vueファイルを格納していきます。
plugins: Vueインスタンスが起動する前にロードする、JavaScriptプラグインを保存しておきます。
public: Nuxt2までの「static」となります。Nuxt3ではこちらのフォルダを使用します。「robots.text」「favicon」「画像ファイル」などを保存します。
composables: Nuxt2までの「store」フォルダとなります。Vuex ストアのファイルを入れます。Vuex ストアは Nuxt.js に付属していますが、デフォルトでは無効になっています。このディレクトリに index.jsファイルを作成するとストアが有効になります。
nuxt.config.ts: Nuxt.js のカスタム設定を記述します。※ ファイル名の変更は基本的にしてはいけません。
package.json: アプリケーションが依存するパッケージやスクリプトを記述します。※ ファイル名の変更は基本的にしてはいけません。