AMG Solution

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

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

プロジェクト構成

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

 sample-project
   |- .nuxt
   |- assets
   |- components
   |- layouts
   |- middleware
   |- node_modules
   |- pages
   |- plugins
   |- static
   |- store
   |- .editorconfig
   |- .eslintrc.js
   |- .gitignore
   |- .prettierrc
   |- nuxt.config.js
   |- package.json
   |- package-lock.json
   |- README.md
   |- stylelint.config.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
アプリケーションが依存するパッケージやスクリプトを記述します。※ ファイル名の変更は基本的にしてはいけません。

 
もっと詳しい説明については、Nuxt.jsの公式ページをご覧ください。
Nuxt.js公式ページ

最後に

今回でNuxt.jsについての説明は終了となります。次回からは、Nuxt.jsの便利なライブラリについてご紹介していきたいと思います。
 
それではまた。
 
 
 
 
《関連記事》

HIGUCHI'S BLOG

樋口の記事

樋口の記事の最新情報をお届けいたします。

SAME CATEGORY BLOG

この記事と同様のカテゴリー記事

新卒採用
はじめました。
LOADING