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

javascript

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

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

ツリーで全体を確認

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などのファイルを置く場所みたいですね。

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>

なるほど。。

layouts

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

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

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

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

middleware

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

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

node_module

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

pages

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

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

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

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

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もまだまだ使い始めなので、慣れていきたいですね〜。。

コメント

タイトルとURLをコピーしました