Vue.jsベースのフレームワーク！ Nuxt.js入門《プロジェクト構成の説明》

#JavaScript #feels #Nuxt.js #Vue.js

記事をシェア：

コピー

こんにちは、樋口です。

今回は、Nuxt.jsの自動作成したプロジェクトの各構成について説明していきます。最後まで見ていただけると嬉しいです。

プロジェクト構成

Nuxt.jsでのプロジェクトの生成については、以下のブログを参照してください。
Vue.jsベースのフレームワーク！ Nuxt.js入門《環境構築からプロジェクト実行まで》

早速下記に生成されたプロジェクトの構成を記載します。

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

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

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

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