【Nuxt学習日記】#1 ディレクトリ構成を学ぶ
以前の記事にてNuxtのプロジェクトを作成してみたが、初心者なので全てが理解できていない。
ということで、勉強を兼ねて今回から学習日記を初めてみた。
まず今回はディレクトリ構成を学んでいこうと思う。
Nuxtのディレクトリ構成
私の以前の記事の設定でプロジェクトを作成すると以下のようなディレクトリ構成がとりあえず自動生成された。
- .git/
- .gitignore
- .nuxt/
- README.md
- assets/
- components/
- layouts/
- node_modules/
- nuxt.config.js
- package-lock.json
- package.json
- pages/
- static/
- store/
さっぱり分からないので以下のページを参考にしつつ、１つ１つ調べながら私なりに解説してみる。
.git
Gitリポジトリのディレクトリ。
プロジェクト作成時にバージョンコントロールシステムでGitを指定したので自動で作成してくれている。
.gitignore
Gitの管理対象除外設定ファイル。
バージョン管理したくないファイルについてはここにファイルを書けばGitのバージョン管理外にしてくれる。
.nuxt
npm run devを実行した際にビルド処理が内部で行われるが、ビルド後のファイル類がこのディレクトリに置かれる模様。
消してもnpm run devを実行すると中のファイル類は自動生成してくれる。
実装したソース類を置くディレクトリではない。
README.md
ただのReadMe。
中を見ると英語でディレクトリの説明を色々書いてくれている。
assets
cssのスタイルシートファイルや画像ファイルのようなコンパイルしない、制御処理が無いタイプのファイルを置くディレクトリ。
components
インポートして使用するVueのファイルを入れるディレクトリ。
他のVueファイルのモジュールを参照する際、通常はimportを書かないといけないがこのディレクトリに置かれているファイルはnuxtが自動でインポートしてくれるので不要でラク。
ちなみに、nuxt.config.jsの設定でcomponents:の設定で自動インポートは切り替えれる。
layouts
各ページで共通のレイアウトを使用するためのレイアウトファイル格納ディレクトリ。
こうすることで、各ページからはlayout:でレイアウトファイル名を指定するだけでカンタンにレイアウト適用することができる。
何も指定しないとdefault.vueというレイアウトファイルが適用される。
node_modules
プロジェクトで使用するJavaScriptのパッケージ類が格納されている。
実装時に触るディレクトリではない。
nuxt.config.js
アプリケーション設定ファイル。
以下のページを見るとデフォルトの設定から色々変更することができるようだが、分かっていないので追々学習する。
package-lock.json
npm install を実行した際に自動生成されるファイル。
実装時に変更したりするファイルでは無いので無視しておいてよさそう。
package.json
ビルド時のオプションを変更したり、ビルドやアプリケーション実行時に処理をフックして何か別の処理を動かしたりとかの設定をするためのファイル。
ビルド時に自動テストや静的解析なんか設定もできそう。
pages
アプリケーションのビュー及びルーティングファイルを入れるディレクトリ。
pagesの中のvueファイルの配置で各ページのURLパスを自動で作成してくれるらしい。
例）pages/Taro.vue -> /Taro
pages/Person/Ichiro.vue -> /Person/Ichiro
static
静的なアセットファイル類を置くディレクトリ。
正直assetsディレクトリとどう使い分ければよいか分かっていない。
cssはassetsで画像系ファイルはstaticに置くのでも良さそう。
store
アプリケーションの状態やデータ等の保持に使うディレクトリ。
全体で使用するグローバル変数とかはここに置くのが良いかも。
Discussion