「Nuxt.jsビギナーズガイド」の感想・備忘録1

Vue.jsアプリをサーバサードレンダリングするために生まれ、そこから様々な機能が追加されていった。
機能は大きく分けると以下の3つである。
（1はVue CLIでも同様なので、2と3がNuxt.jsのメリットといえる）
- ビルドプロセスの隠蔽
  webpackの設定から解放される。
- Vueのエコシステムとインテグレーション
  Vue Router, Vuex, Vue Server renderer, vue-metaが組み込まれている。
- 独自レイヤの実装
  middleware, pluginsなど。
Vue.jsは自由度が高いため、Nuxt.jsを使うことでルールに沿った開発を行うことができる。
- SPAでない場合は、Nuxt.jsを使うべきではない。
- SPAであれば、Nuxt.jsを使うべき。
3つのモードがあり、SSRの場合はサーバにNode.jsが必要になる。
- Universal=SSR
- SPA
- Generate=SSG

規約

Nuxt.jsではVue.jsで多く利用されてきた開発パターンを「規約」として固定のルールにしている。
例えば、以下のような規約がある。

「pages配下のvueファイルはページを表す」という規約により、開発者はVue Routerの設定から解放される。
「data関数の代わりにasyncData関数を使う」という規約により、簡単にSSRを実装することができる。

assetsディレクトリにはwebpackでコンパイルしたい静的ファイル、staticにはコンパイルしたくない静的ファイルを格納する。
assetsへのパスは'~assets/image.png'のように先頭にチルダを使う。
本番環境用にコンパイルするとimage.db46865.jpgのようなハッシュ付きのファイル名になるため、キャッシュの影響を受けないというメリットがある。

開発環境構築

vue initによる開発環境構築

npm -y init
npm install @vue/cli @vue/cli-init npx vue init nuxt-community/starter-template my-first-nuxt-app
cd my-first-nuxt-app
npm install
npm run dev