Nuxt.js 入門 #3 – Nuxt.js のフォルダ構成

Nuxt.js を利用したアプリケーション開発の手法を紹介していきます。
第三回目は Nuxt.jsのフォルダ構成を確認していきます。

Nuxt.js のフォルダ構造

Nuxt.js は Vue.js を利用してWebアプリケーションを作成するための、フレームワークです。

Vue.js による開発で頻繁に利用される VueRouter や Vuex との強固な連携で、複雑なWebアプリケーションを快適に構築する事が可能になっています。

Nuxt.js の基本テンプレートは、以下の vue-cli コマンドで簡単に生成することが出来ます。

$ vue init nuxt-community/starter-template my-vue-app
.
├── assets
├── components
├── layouts
├── middleware
├── pages
├── plugins
├── static
├── store
├── README.md
├── nuxt.config.js
└── package.json

それぞれのフォルダの役割を、順に確認して行きましょう。

assets

Nuxt.js の Project で利用される SCSS や image など、JavaScript 以外のファイルを格納する箇所です。

主に Webpack 等を利用して Bundle されるものを想定しており、単に静的に配信されるファイルは static に格納するほうが良いでしょう。

components

Nuxt.js で使用する Vue コンポーネントを格納します。

layouts

ページで使用するレイアウトファイルを格納します。

デフォルトで、default.vue が用意されており標準のページでは、これが利用されます。

レイアウトは、ページコンポーネント側で layout を指定することで変更することができます。

middleware

ミドルウェアを格納します。

ミドルウェアはページが生成される際に実行されるスクリプトファイルです。

ミドルウェアも、ページコンポーネント側で middleware を指定することで利用することが可能になります。

pages

ページコンポーネントを配置します。

このフォルダ内に作成されたページコンポーネントはルーティングの対象としてアドレスが割り当てられます。

_ で始まるファイル名、フォルダ名は動的なパラメータとして解釈されます。

- で始まるファイル名、フォルダ名は、ルーティングの対象から除外されます。

plugins

Nuxt.js で使用されるプラグインを配置します。

プラグインはVue本体の設定を変更するのに有効な手段です。

プラグインを利用する場合 nuxt.config.js にプラグインを追記する必要があります。

static

画像など、静的に配信するファイルを配置します。

store

Vuex のモジュールファイルを格納します。

Webpack によるインポート

/assets/component に配置されたファイルを import する場合、
以下のように ~@ を利用したパス参照が利用可能です。

import AppLogo from "~/components/AppLogo.vue"

相対パス../を利用したファイル参照は、フォルダが深くなると非常にわかりづらいため、
極力
~/` を利用したファイル参照を利用する事をおすすめします。

nuxt.config.js

nuxt.config.js は Nuxt.js を使用する上での環境設定ファイルです。

nuxt.config.js を変更することで Nuxt.js に様々な機能を追加したり、挙動を変更する事が可能になっています。

全ての 設定項目は 以下の資料にまとめられているため、一度確認してみると良いでしょう。

https://ja.nuxtjs.org/guide/configuration

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です