3連休最後は公式のドキュメントを見ながらNuxt.jsで遊んだ。
yarnもしくはnpxを使ってちゃちゃっとプロジェクトの土台を作れて、始めるのはとても楽だった。 ちょい概念として予習したほうが良さそうなのが、Flux。Actionとかdispatcherとか、データをstoreに置いてviewに反映さえるとか、Fluxアーキテクチャのフローは先に知っておくと良さそう。
ちゃっと作って。。。
わーーい。すぐに画面ができた。
使ってみて
最初に触ってみて思ったのが、ファイル構造がわかりやすいということ。それぞれが何の役割を持っていて、何をするのか?をパッとディレクトリ構造を見ればわかるし、細かい設定はだいたいnuxt.config.js
を見ればわかる。
Vueを勉強し始めた時は、以下のVue.js入門を読みながら進めたのだけど、Nuxt.jsを触りながらのほうがより実践的にVue.jsの知識を習得しやすかったかな〜とか思ったりもした。
先程、ファイル構造がわかりやすいと言ったように、ルーティングごとにpages
配下にvueファイルを置けばnuxtがファイルを読んでいって対応したルーティングを作ってくれる。基本的にRailsみたいにconfig/route.rb
とか作らなくて良い。動的にルーティングも_show.vue
みたいにアンスコを頭に入れれば出来る。
pages
以外にも、layouts
, middlewares
, plugins
, modules
, components
, static
, store
といったディレクトリがある。
layouts
は想像の通りデフォルトのレイアウトテンプレートを置くところ。エラーのレイアウトのテンプレートも用意しておけば、エラー時にNuxtが良しなにエラーの方のテンプレートを呼び出してくれる。
statics
はその名の通り静的ファイルを置いておくディレクトリなんだけど、webpackで扱うパターンと、単に置いておいて管理するパターンの両方が出来る。
middlewares
はルーティング前に制御したい処理を書いておく。
外部プラグインなどはplugins
に置いていき、VueのインスタンスやVueストアにInjection(注入)して使うことが可能。
modules
はNuxt.jsのコアをどんどん拡張していくことが出来る。多分、もっとサービスの機能を増やしていくとなると、このあたりのディレクトリをいじっていくことになるのかなと思う。
store
(VuexStore)についてはクラシックモードとモジュールモードの2つがある。サーバサイドから初期値などを取得したい時はnuxtServerInit
とかに処理を書くと良さそう。
nuxt.config.jsが肥大化していきそうな予感
初めて触ってみて、middlewareやpluginを読み込んだり、ヘッダー情報を書き込んだり、グローバルなcssを読み込んだり、環境ごとのビルドを設定したりと、いろんなことを設定できるコアのファイルとしてnuxt.config.js
ってのがあって、これがプロジェクトルートに置いてある。
結構これの設定が重要で、アプリーケーションが大きなるに連れて、このconfigファイルを大きくなりそう。。。