「Hello Nuxt!!: Vue.jsのサーバサイドレンダリングフレームワーク」の感想・備忘録

posted with ヨメレバ

Amazonで見る

Kindleで見る

kindle本「Hello Nuxt!!: Vue.jsのサーバサイドレンダリングフレームワーク」のまとめ。

点数
感想
Nuxt.jsとは
Nuxt.jsのはじめ方
1. npmの場合
2. create-nuxt-appの場合
nuxtコマンド
pagesディレクトリとルーティング
storeディレクトリ
Nuxt独自の属性

点数

55点

感想

ちょっとひどい内容だった。
最初から読み進めても理解することができない構成になっていた。
著者が書きたいことを書いて終わり、という感じ。

Nuxt.jsとは

Nuxt.jsはユニバーサルアプリを構築するためのフレームワークである。
ユニバーサルアプリとは、クライアントサイトとサーバサイドの両方で実行できるJavaScriptアプリケーションであり、簡単に言うと、同じJavaScriptコードでクライアントサイドのSPAとサーバサイドのサーバサードレンダリングを実現するものである。

Nuxt.jsにはデフォルトでVuexやvue-routerが組み込まれている。

Nuxt.jsのはじめ方

npmの場合

npm -y init
npm install nuxt
mkdir pages
touch pages/index.vue
<template>
<h1>Halle Nuxt</h1>
</template>
npx nuxt devで実行するとhttp://localhost:3000で確認可能
※ package.jsonのscriptに"dev": "nuxt dev",を追加するとnpm run devで実行可能。

create-nuxt-appの場合

npm -y init
npm install --save-dev create-nuxt-app
npx create-nuxt-app アプリ名
cd アプリ名
npm run devで実行するとhttp://localhost:3000で確認可能

nuxtコマンド

npx nuxt (npm run dev)

開発モードでサーバを起動。

npx nuxt build (npm run build)

Webpackによるjsとcssのビルド。
結果は.nuxt/dist/ディレクトリに出力される。

npx nuxt start (npm run start)

プロダクションモードでサーバを起動。
buildの後に実行する必要がある。

npx nuxt generate (npm run generate)

静的ファイル生成。
結果はdistディレクトリに出力される。

pagesディレクトリとルーティング

pagesディレクトリ内の1つの.vueファイルが1つのページとなる。
page内のディレクトリ・ファイルは、vue-routerでのルーティングが自動的に生成される。
ex) pages/hoge/index.vueは/hogeのルーティングが生成される。
※ ルーティングのコードは.nuxt/router.jsに生成される。

ディレクトリ名や.vueファイル名の先頭を_(アンダースコア)にすると、パラメータ付きの動的なルーティングとなる。
ex) pages/hoge/_id.vue

<template>
  <h1>id: {{ $route.params.id }}</h1>
</template>

※ .eslintrc.jsのparserOptionsにrequireConfigFile: false,がないとビルドエラーとなった。(21.6.29)

storeディレクトリ

VuexのStoreを配置する。Vuexが不要な場合は使用しない。
Vuexの使用はクラシックモードとモジュールモードがある。

クラシックモード
store/index.jsでVuexを読み込み、作成したstoreをexportする。
モジュールモード
ファイル毎にstate, mutations, actionsをexportする。

Nuxt独自の属性

Nuxt.jsでは.vueファイルに独自の拡張が加えられている。

asyncData

コンポーネントにデータをセットする前に非同期処理を行うためのフック。
asyncDataで取得したデータはdataにマージされる。
コンポーネントロード時に毎回実行される。SSR時にも実行される。
実装は「Promiseを返す」「async/awaitを使用する」「第2引数にコールバックを渡す」のいずれかである必要がある。