【Vue.js】SSR(サーバーサイドレンダリング)アプリケーション開発のためにNuxt.jsの環境を整える【Nuxt.js】
今回はVue.jsアプリケーションを簡単にSSR化できるフレームワークであるNuxt.jsをご紹介します。
ここでは開発環境を整えるまでを解説しますが、Nuxt.jsとは何か、SSRとはなどの内容には触れていませんのでご了承ください。
Nuxt.jsアプリを作成
ここでは簡単に開発環境を整えることができるcreate-nuxt-appを使用します。
これをインストールして開発環境を整えて行きましょう。インストールにはyarnを使用します。
(yarnは導入済みとして進めますのでご注意下さい)
https://yarnpkg.com/ja/
$ yarn create nuxt-app プロジェクト名
Nuxt.jsアプリを設定
create-nuxt-appを上記のコマンドでインストールするといくつか質問されるので、ご自分の環境などに合わせて答えましょう。
サーバーサイドフレームワークの選択
こだわりがなければデフォルトの「None(Nuxt default server)」でいいです。
もしご希望の選択肢があればそれを選択してください。
UIフレームワークの選択
こちらもこだわりがなければデフォルトの「None」で問題ありません。
Nuxt.jsのモード選択
デフォルト値「universal」を選択することをオススメします。
universalはサーバーサイドレンダリングに加え、クライアントでのナビゲーションを行うモードです。
spaはサーバーサイドレンダリングを行わない（クライアントでのナビゲーションのみ）モードです。
axiosの追加選択
HTTP リクエストを簡単に行うためのaxiosを追加するかどうか選択可能です。
入れておいて損はないです。
外部との通信などを全く考慮しない場合はなくてもいいかもしれません。
Prettierの追加選択
ソースコードを整形してくれるツールであるPrettierを導入するか選択できます。
こちらも最初はなくてもいいと思います。
これでインストールが完了したら、開発環境が整います。
Nuxt.jsアプリの画面確認
インストールが完了したら、プロジェクトを開始します。
$ yarn run dev
や
$ npm run dev
とすることで、http://localhost:3000 にアクセスできるようになり、インストール直後の画面を確認できます。
ここまでで開発環境を整えることができました。
次回以降で、どのようなフローで開発していくか確認していきます。
以上です。
