【超初心者向け】Nuxt.jsを使いWebサイトを作成するその1.5～フォルダ構成とファイルの解説1～

2020年1月14日 00:40

次はSass導入の手順を解説する予定でしたが、先にプロジェクト内のフォルダ構成とファイルの解説などを行っていきます。

assets ディレクトリ

CSS、Sass、フォントなどコンパイルされないファイルを入れるディレクトリです。
また、webpackのモジュールとして扱いたい画像もこのディレクトリへと入れます。
このフォルダにあるファイルを使用する際は

'~/assets/フォルダ/ファイル'
'@/assets/フォルダ/ファイル'

と記載します。

■例

assets/
  └image/
    └pic.png

このようなディレクトリ構造の場合、

<img src="~/assets/image/pic.png">

と記載することでpic.pngを表示することが出来ます。

【参考】アセットに関するドキュメント
https://ja.nuxtjs.org/guide/assets/

Vue.jsのコンポーネントファイル（部品）を入れるディレクトリです。
基本的にheaderやfooterなど、全ページで使用する共通パーツを置いておくという認識で大丈夫だと思います。

画面全体の基本的なレイアウトを定義するvueファイルが置かれたディレクトリです。
デフォルトで default.vue ファイルが用意されており、このvueファイルをベースとして各ページのコンテンツが組み込まれて表示されます。

componentsに置いている全ページで使用する共通パーツなどは、このvueファイルへ記載します。

【参考】レイアウトに関するドキュメント
https://ja.nuxtjs.org/guide/directory-structure/

ビューとルーティングに関する役割を負っている一番重要なディレクトリで、ここに置かれたファイルなどをもとにWebページが作成されます。

このディレクトリ直下にあるindex.vueには、一番最初に表示させるページ（index）のHTMLを記載します。

【参考】ページに関するドキュメント
https://ja.nuxtjs.org/guide/views/

インスタンス化する前に実行したい JavaScriptファイルを置くディレクトリです。
jsファイルを置く場所ってくらいざっくり覚えてしまっていいと思います。

【参考】プラグインに関するドキュメント
https://ja.nuxtjs.org/guide/plugins/

favicon,、robots.txt、sitemap.xml など変更される可能性が低い静的ファイルを置くディレクトリです。
webpackのモジュールとして扱いたくない画像もここへ入れます。

Nuxt.jsのデフォルト設定を上書きするファイルです。
サイトに関する設定の大半はここで行います。

nodeなどを使ったプログラムについての情報を書き込むファイルです。
npm installの際--save-devを記載すると、インストールしたしたものの名前が自動的に書き込まれます。

以上です。
今回は必要最低限の解説を行いました。
次回こそはSassを使用する方法を解説していきます。