2019.07.19 追記
この導入方法は Nuxt.js ver2.3.x のものになります。
最新（ver2.8.1）の導入方法は こちら を読むといいかもです。
はじめに
社内向けのブログ作るつもりだったので SSR を売りとした Nuxt.js を利用するつもりはなかったのですが、個人的に使っていると Vue CLI 単独で作ってるときよりも作りやすかったので試しに導入してみようと思ったわけです。
Nuxt.js is 何？
公式によると
サーバサイドとクライアントサイドのディストリビューションを抽象化しつつ UI レンダリングすることに焦点を当てています。
Nuxt.js はサーバーサイドレンダリングをもっと楽しめるように Vue.js アプリケーションの開発に必要な設定をあらかじめプリセットしています。
さらに、Nuxt.js はシングルページアプリケーション（spa モード）を手早く作成する際にも使えます。
なフレームワークです！
都合の良いところばかり切り出しましたが、プリセットが強力だったのと SPA が作りやすそうだったので使ってみます！
Nuxt.js をインストール
コマンドラインから次のコマンドでインストールします。
- Yarn を使った場合
> yarn create nuxt-app <my-project>
- npx を使った場合
（npx は NPM 5.2.0 からデフォルトでバンドルされています）
> npx create-nuxt-app <my-project>
インストールと言うよりはプロジェクトを作成する感じになります。
このあといくつか質問がありますので、それぞれ解説します。
Project name
? Project name (my-project)
プロジェクト名を聞かれます。
デフォルトはインストール時にパラメーターで渡したものが表示されますので、大抵の場合はそのまま [Enter] で良いかと。
Project description
? Project description (My priceless Nuxt.js project)
プロジェクトの説明文です。
デフォルトは My priceless Nuxt.js project です。
プロジェクト作成時に自動生成される README.md に記載される内容ですが、あとでいくらでも変更できるので、ここで悩む必要はないと思います。
Use a custom server framework
? Use a custom server framework (Use arrow keys)
> none
express
koa
adonis
hapi
feathers
micro
サーバーサイドのフレームワークを聞かれます。
express と組み合わせる構成はよく見かけますが、Firebase 使いますし、今回は使用しない方向で設定しました。
Use a custom UI framework
? Use a custom UI framework (Use arrow keys)
> none
bootstrap
vuetify
bulma
tailwind
element-ui
buefy
UI フレームワークを聞かれます。（あとで変更可能！）
別記事で Bootstrap 導入していますが、jQuery 使っているので Vue と相性が悪い気がして…
今回は bulma にしてみました！
（ある程度使ったら記事にするつもりです！）
Choose rendering mode
? Choose rendering mode (Use arrow keys)
> Universal
Single Page App
ユニバーサルアプリケーションとシングルページアプリケーションのどちらで作るか聞かれます。
作るアプリに合わせて選択したら良いですね。
私の場合は SPA で！
Use axios module
? Use axios module (Use arrow keys)
> no
yes
axios を利用するかどうか聞かれます。
axios は Promise ベースの戻り値を得ることができる HTTP クライアントです。
API 利用時などはコーディングがかなり簡単になるので入れておけば良いかと。
Use eslint
? Use eslint (Use arrow keys)
> no
yes
ESLint を利用するかどうか聞かれます。
コーディングスタイルを統一するのに便利だから入れておけばいいかと。
Use prettier
? Use prettier (Use arrow keys)
> no
yes
Prettier を利用するかどうか聞かれます。
Prettier は今話題のコードフォーマッターらしいのですが、使ったことないです。
リントツールである ESLint と機能がかぶる部分もありますがコードフォーマッター部分を連動させたりすることも出来るらしく、今回は入れて使ってみようと思います。
Author name
? Author name (kurararara)
作成者名を聞かれます。
Choose a package manager
? Choose a package manager (Use arrow keys)
> npm
yarn
パッケージマネージャーに npm と yarn のどちらを使うか聞かれます。
Please wait a minute...
この後、プロジェクト作成が行われ、
To get started:
cd my-project
yarn run dev
To build & start for production:
cd my-project
yarn run build
yarn start
Done in 2075.80s.
とメッセージが出たら作成完了です！
起動してみよう！
完了メッセージにあったように、作成されたプロジェクトに移動して、起動コマンドを入力してみましょう。
- Yarn を使った場合
> cd my-project
> yarn run dev
- npm を使った場合
> cd my-project
> npm run dev
起動したら…
<my project path>/pages/index.vue
36:1 error Delete `⏎` prettier/prettier
✖ 1 problem (1 error, 0 warnings)
1 error and 0 warnings potentially fixable with the `--fix` option.
って、えっ？？
さっそく prettier が頑張りました。
（インストール時に選択できるパターンくらいはエラーにならないようにしておいてほしいよな…）
index.vue の <style> タグ直下の空行を削除すればエラーは消えました。
<style>
/* <= この空行が駄目らしい */
.container {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
/* 中略 */
</style>
修正が終わったら
» pages\index.vue
√ Client
Compiled successfully in 422.30ms
エラー解消して起動が完了しています。
気を取り直して http://localhost:3000/ にアクセスです！
いえい！
まとめ
Vue CLI のときにも書きましたが、プロジェクト作成から起動までの速度がかなり早いです！
初めて触れるプログラミング言語って、ブログとか記事は読むけどなかなか手を動かすところまではいけないんですよね～
実際のところ、読んだだけじゃ全然身になってないんですけどね（汗）
Nuxt.js の導入は難易度も高くなくすぐにアプリ起動までだどりつけますので、騙されたと思って起動までやってみるとモチベーションアップに繋がるかも？！
（同じ文章の使い回しすんません）
インデックスページから来た人向け
思いっきし軌道修正（というか方向修正） しちゃいましたが、色々なことに触れて少しずつ進めていきますので、よかったら他の記事も見てみてください！