前回作った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>
なるほど。。
![](https://codelikes.com/wp-content/uploads/cocoon-resources/blog-card-cache/a0f15262a6c8878a296a0da7b4a6201c.png)
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fpublic%2Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png?ixlib=rb-4.0.0&w=1200&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9bnV4dC5qcyVFMyU4MSVBQiVFMyU4MSU4QSVFMyU4MSU5MSVFMyU4MiU4QiVFMyU4MCU4Q2NvbXBvbmVudHMlRTMlODAlOEQlRTMlODMlODclRTMlODIlQTMlRTMlODMlQUMlRTMlODIlQUYlRTMlODMlODglRTMlODMlQUElRTMlODElQUUlRTglQTYlOEYlRTclQjQlODQlRUYlQkMlODglRTYlQTElODglRUYlQkMlODkmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtY2xpcD1lbGxpcHNpcyZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWM1NTkxODg2ZTU3NDRjZGRkODU2MDMyZmU1MGRlYzk3&mark-x=142&mark-y=112&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwYW1pc2hpcm8mdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTUzODZhN2U2YzgxYzUwYWVjODRmMmZkYjc0MWEwZjc5&blend-x=142&blend-y=491&blend-mode=normal&s=61171b34b41e310a1696b272021db3a5)
layouts
このディレクトリには、アプリケーションレイアウトが含まれています。
フッター、ヘッダー、サイドバーとかの画面レイアウト構成のファイルをここにおいて、
ページ内容はpages配下におくようです。
ページで使う枠の部品を置くところみたいですね。
初期ではdefault.vueとerror.vueが置いていて、
default.vueがページを構成するレイアウトファイルで
error.vueがNotFound(404)やInternalServerError(500系)エラーがきた時に表示される共通レイアウトになっているようです。
middleware
このディレクトリには、アプリケーションミドルウェアが含まれています。ミドルウェアを使用すると、ページまたはページのグループをレンダリングする前に実行できるカスタム関数を定義できます。
ページをレンダリングする前の処理をかけるみたいです。
ページを表示する際の認証とかを書いておけるのかな。
![](https://codelikes.com/wp-content/uploads/cocoon-resources/blog-card-cache/8c89d1618c511a7dd285c38563c45e88.png)
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もまだまだ使い始めなので、慣れていきたいですね〜。。
コメント