nuxt+vuetifyのディレクトリ構成を確認。

前回作ったnuxtプロジェクト(ui:vuetify)のディレクトリ構成を確認してみました。

ディレクトリ構成を確認してみた。
1. ツリーで全体を確認
各ディレクトリが何をやるか確認
終わりに

ディレクトリ構成を確認してみた。

ツリーで全体を確認

poc-nuxt/       
▾  assets/                     
     README.md                 
     variables.scss            
▾  components/                 
     Logo.vue                  
     README.md                 
     VuetifyLogo.vue           
▾  layouts/                    
     default.vue               
     error.vue                 
     README.md                 
▸  middleware/
     README.md               
▸  node_modules/               
▾  pages/                      
     index.vue                                                                                                                                                                                                 
     inspire.vue               
     README.md                 
▾  plugins/                    
     README.md                 
▾  static/                     
     favicon.ico               
     README.md                 
     v.png                     
▾  store/                      
     README.md                 
   nuxt.config.js              
   package.json                
   README.md

構成はこんな感じになっていて、よくみると各ディレクトリにREADME.mdがあるので読むべきですね🧐
それぞれ何が書いてあるかgoogle翻訳にかけて見てみます。

各ディレクトリが何をやるか確認

assets

このディレクトリには、LESS、SASS、JavaScriptなどの未コンパイルのアセットが含まれています。

未コンパイルのjsやsass,lessなどのファイルを置く場所みたいですね。

関連リンク：

アセットディレクトリ

The assets directory contains your un-compiled assets such as Stylus or Sass files, images, or fonts.

components

componentsディレクトリには、Vue.jsコンポーネントが含まれています。

画面でよく使う部品をコンポーネント化して、置いておく場所みたいです。

初期構成ではLogo.vue, VuetifyLogo.vueが置いていて、
pages/index.vueで読み込まれて使われています💡

読み込んで、

<script>
import Logo from '~/components/Logo.vue'
import VuetifyLogo from '~/components/VuetifyLogo.vue'

export default {
  components: {
    Logo,
    VuetifyLogo
  }
}

タグとして使える。。

<div class="text-center">
  <logo />
  <vuetify-logo />
</div>

なるほど。。

関連リンク：

コンポーネントの基本 — Vue.js

Vue.js - The Progressive JavaScript Framework

nuxt.jsにおける「components」ディレクトリの規約（案） - Qiita

nuxt.jsでは、特殊な事情がない限り３つのディレクトリにコンポーネントファイルが格納されます。layouts pagesディレクトリについては公式ドキュメントを参考にし、残りのcomponentsディレクトリについてオリジナルの規約（整...

layouts

このディレクトリには、アプリケーションレイアウトが含まれています。

フッター、ヘッダー、サイドバーとかの画面レイアウト構成のファイルをここにおいて、
ページ内容はpages配下におくようです。

ページで使う枠の部品を置くところみたいですね。
初期ではdefault.vueとerror.vueが置いていて、

default.vueがページを構成するレイアウトファイルで
error.vueがNotFound(404)やInternalServerError(500系)エラーがきた時に表示される共通レイアウトになっているようです。

関連リンク：

ビュー

ビュー (Views) セクションでは、Nuxt アプリケーション内の特定のルートのデータとビューを設定するために必要なことを全て説明しています。ビューは、アプリテンプレート、レイアウト、ページで構成されています。

middleware

このディレクトリには、アプリケーションミドルウェアが含まれています。ミドルウェアを使用すると、ページまたはページのグループをレンダリングする前に実行できるカスタム関数を定義できます。

ページをレンダリングする前の処理をかけるみたいです。
ページを表示する際の認証とかを書いておけるのかな。

関連リンク：

ルーティング

多くのウェブサイトでは単一のページではなく、複数ページを持っています。例えばホームページ、概要ページ、お問い合わせページなどです。これらのページを表示するにはルーターが必要です。

node_module

nodeのモジュールディレクトリです。
nuxtやvueに限らず、yarnやnpmでインストールしたモジュールが配置されます。(package.jsonで管理)

pages

このディレクトリには、アプリケーションビューとルートが含まれています。フレームワークは、このディレクトリ内のすべての* .vueファイルを読み取り、アプリケーションのルーターを作成します。

ここにページを作っていくようです。

初期ではトップページのindex.vueとinspire.vueの2ページが用意してあって、
それぞれのページにサイドバーのリンクから飛べます。

routerファイルがないと思ったら、勝手にやってくれているんですね✨

関連リンク：

Routing

Most websites have more than just one page. For example a home page, about page, contact page, etc. In order to show the...

plugins

このディレクトリには、ルートVue.jsアプリケーションをマウントする前に実行するJavascriptプラグインが含まれています。

外部モジュールを使ったり、自作のモジュールをおいたりするようです。

プラグインディレクトリ

plugins ディレクトリにはルート Vue.js アプリケーションがインスタンス化する前に実行する Javascript プラグインが含まれています。

static

このディレクトリには静的ファイルが含まれています。このディレクトリ内の各ファイルは/にマップされます。したがって、実稼働環境にデプロイする前に、このREADME.mdを削除する必要があります。

画像などの静的ファイルを置く場所です。
初期はfavicon.icoとvuetifyのロゴ画像が置いてあります。

store

このディレクトリには、Vuex Storeファイルが含まれています。 Vuex StoreオプションはNuxt.jsフレームワークに実装されています。
このディレクトリにファイルを作成すると、フレームワークのオプションが自動的にアクティブになります。

vuexのstoreのファイルをおく場所ですね。
自分はまだ少ししかstoreファイルいじったことないので理解が浅いですが、公式のこの辺にどんなものか書いてあります。

終わりに

各ディレクトリを眺めて、理解が深まった気がします。

ちなみに、pages以外のディレクトリのREADME.mdには下記のような一文が書いてあって
必要でない場合は消してよいとなっているようです。

This directory is not required, you can delete it if you don’t want to use it.

nuxtもまだまだ使い始めなので、慣れていきたいですね〜。。

ディレクトリ構成を確認してみた。

ツリーで全体を確認

各ディレクトリが何をやるか確認

assets

components

layouts

middleware

node_module

pages

plugins

static

store

終わりに

コメント