The sky is the limit

Vue.js、PHP、Java、Cordova、Monacaを中心にハイブリッドアプリ開発、PWA開発など効率的なWEB、iOS、Androidアプリ開発の情報を共有します。

【Vue.js】SSR(サーバーサイドレンダリング)アプリケーション開発のためにNuxt.jsの環境を整える【Nuxt.js】

【Vue.js】SSR(サーバーサイドレンダリング)アプリケーション開発のためにNuxt.jsの環境を整える【Nuxt.js】

f:id:duo-taro100:20160218004611p:plain

今回はVue.jsアプリケーションを簡単にSSR化できるフレームワークであるNuxt.jsをご紹介します。
ここでは開発環境を整えるまでを解説しますが、Nuxt.jsとは何か、SSRとはなどの内容には触れていませんのでご了承ください。

Nuxt.jsアプリを作成

ここでは簡単に開発環境を整えることができるcreate-nuxt-appを使用します。

github.com


これをインストールして開発環境を整えて行きましょう。インストールには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はサーバーサイドレンダリングを行わない(クライアントでのナビゲーションのみ)モードです。

https://ja.nuxtjs.org/api/configuration-mode/

axiosの追加選択

HTTP リクエストを簡単に行うためのaxiosを追加するかどうか選択可能です。
入れておいて損はないです。
外部との通信などを全く考慮しない場合はなくてもいいかもしれません。

EsLintの追加選択

Javascriptのための静的検証ツールであるEsLintを導入するか選択できます。
最初はなくてもいいと思います。

eslint.org

Prettierの追加選択

ソースコードを整形してくれるツールであるPrettierを導入するか選択できます。
こちらも最初はなくてもいいと思います。

prettier.io


これでインストールが完了したら、開発環境が整います。

Nuxt.jsアプリの画面確認

インストールが完了したら、プロジェクトを開始します。

$ yarn run dev

$ npm run dev

とすることで、http://localhost:3000 にアクセスできるようになり、インストール直後の画面を確認できます。
ここまでで開発環境を整えることができました。
次回以降で、どのようなフローで開発していくか確認していきます。
以上です。