目次
プロジェクトフォルダの中身は？
プロジェクトを作成したはいいもののいくつもファイルがあってわかりにくいですよね・・・
なので今回の記事ではNuxt.jsプロジェクト内の各ディレクトリの役割を解説したいと思います！
/assets 〜Directly〜
このディレクトリには主にコンパイルされていないファイル(JavaScriptとかcssとか画像ファイルとか)を格納します。
/components 〜Directly〜
このディレクトリにはvue.jsのコンポーネンファイルといっても拡張子が.vueとなるファイルを格納します。
コンポートファイルとはサイトを構成するためのパーツのようなものです。
例(header.vueとかfooter.vueとか使い回したいものを登録します。)
/layouts 〜Directly〜
このディレクトリには作成するアプリケーションのファイルを格納します。
このファイルも拡張子は.vueで、components（部品）を配置します。
この後に出てくるpagesディレクトリのファイルの要素を表示するために<nuxt />というタグが必須となります。
/middleware 〜Directly〜
このディレクトリに作成したjsファイルは、ページがレンダリングされる前に実行されます。
レンダリングとはHTMLやCSSなどのコードを読み取って実際に表示されるページを生成することです。
なので設計図を元にページが生成よりも前に処理を行うと言ったニュアンスです。
/pages 〜Directly〜
このディレクトリには実際にページとして表示されるファイルを格納します。
このファイルも.vueという拡張子のファイルです。
ここで定義したページは先ほどお話ししたlayoutsディレクトリの中のファイルに書かれている<nuxt />という部分に挿入されます。
/plugins 〜Directly〜
このディレクトリ階層には、Vue.jsアプリケーションがインスタンス化される前に実行したい処理を記述したいJavaScriptのプラグインを格納します。
アプリケーションはVueのインスタンスを作成することによって立ち上がります。
なので下記のようなコードvue.jsで多用するコードですね！
var vm = new Vue({
// オプション
})
が実行されたらインスタンス化される的なニュアンスの認識で大丈夫かと思います。
/static 〜Directly〜
ここには静的なファイルを格納します。
例えばどんなものかと言うとrobots.txtやsitemap.xmlなどを格納します。
このディレクトリは/でアクセスすることが出来、
通常の相対パスならstatic/sitemap.xmlとなりますが、/sitemap.xmlでアクセスできます。
/store 〜Directly〜
ここにはNuxt.jsにオプションとして登録されているVuex ストアと言う機能に関するファイルを格納していきます。
Vuexストアとはどんな機能かと言うと
アプリケーションの現状を保持して、その状態が変化したら諸々の更新を効率よく行うと言ったニュアンスです。
/nuxt.config.js 〜File〜
このファイルはNuxt.jsをカスタマイズする設定ファイルです。
/package.json 〜File〜
このファイルはアプリケーションが依存している、パッケージなどを記述します。
(アプリケーションで使用したい拡張機能をここに登録して使えるようにすると行ったイメージです。)
エイリアス(パスの短縮版のようなもの)
| エイリアス | ディレクトリ |
| ~ or @ | srcDir |
| ~~ or @@ | rootDir |
デフォルトの状態では srcDir も rootDir も違いはありません。
このエイリアスはimportしたりpackage.jsonを編集するときによく使いますので覚えておきましょう！
注意
vue テンプレート内で assets または static ディレクトリへのリンクが必要になった際は ~assets/css/style.css や ~static/favicon.icoなどを使うようにしてください。