Nuxt.js を導入しよう

## 2019.07.19 追記
この導入方法は Nuxt.js ver2.3.x のものになります。
最新（ver2.8.1）の導入方法は [こちら](https://qiita.com/dama-a/items/c8e9053444b2aecbe5ca#_reference-9079ec9ab8e890824645) を読むといいかもです。

## はじめに

社内向けのブログ作るつもりだったので SSR  を売りとした Nuxt.js を利用するつもりはなかったのですが、個人的に使っていると Vue CLI 単独で作ってるときよりも作りやすかったので試しに導入してみようと思ったわけです。

## Nuxt.js is 何？

公式によると

>サーバサイドとクライアントサイドのディストリビューションを抽象化しつつ UI レンダリングすることに焦点を当てています。
>
>Nuxt.js はサーバーサイドレンダリングをもっと楽しめるように Vue.js アプリケーションの開発に必要な設定をあらかじめプリセットしています。
>
>さらに、Nuxt.js はシングルページアプリケーション（spa モード）を手早く作成する際にも使えます。

なフレームワークです！

都合の良いところばかり切り出しましたが、プリセットが強力だったのと SPA が作りやすそうだったので使ってみます！

:link: [Nuxt.js - ガイド](https://ja.nuxtjs.org/guide)

## Nuxt.js をインストール

コマンドラインから次のコマンドでインストールします。

- Yarn を使った場合

```shell
> yarn create nuxt-app <my-project>
```

- npx を使った場合

（npx は NPM 5.2.0 からデフォルトでバンドルされています）

```shell
> npx create-nuxt-app <my-project>
```

インストールと言うよりはプロジェクトを作成する感じになります。

このあといくつか質問がありますので、それぞれ解説します。



### Project name

```shell
? Project name (my-project)
```

プロジェクト名を聞かれます。

デフォルトはインストール時にパラメーターで渡したものが表示されますので、大抵の場合はそのまま [Enter] で良いかと。



### Project description

```shell
? Project description (My priceless Nuxt.js project)
```

プロジェクトの説明文です。

デフォルトは `My priceless Nuxt.js project` です。

プロジェクト作成時に自動生成される `README.md` に記載される内容ですが、あとでいくらでも変更できるので、ここで悩む必要はないと思います。



### Use a custom server framework

```shell
? Use a custom server framework (Use arrow keys)
> none
  express
  koa
  adonis
  hapi
  feathers
  micro
```

サーバーサイドのフレームワークを聞かれます。

`express` と組み合わせる構成はよく見かけますが、`Firebase` 使いますし、今回は使用しない方向で設定しました。



### Use a custom UI framework

```shell
? Use a custom UI framework (Use arrow keys)
> none
  bootstrap
  vuetify
  bulma
  tailwind
  element-ui
  buefy
```

UI フレームワークを聞かれます。（あとで変更可能！）

別記事で `Bootstrap` 導入していますが、`jQuery` 使っているので Vue と相性が悪い気がして…

今回は `bulma` にしてみました！

（ある程度使ったら記事にするつもりです！）



### Choose rendering mode

```shell
? Choose rendering mode (Use arrow keys)
> Universal
  Single Page App
```

ユニバーサルアプリケーションとシングルページアプリケーションのどちらで作るか聞かれます。

作るアプリに合わせて選択したら良いですね。

私の場合は SPA で！



### Use axios module 

```shell
? Use axios module (Use arrow keys)
> no
  yes
```

`axios` を利用するかどうか聞かれます。

`axios` は `Promise` ベースの戻り値を得ることができる HTTP クライアントです。

API 利用時などはコーディングがかなり簡単になるので入れておけば良いかと。



### Use eslint

```shell
? Use eslint (Use arrow keys)
> no
  yes
```

`ESLint` を利用するかどうか聞かれます。

コーディングスタイルを統一するのに便利だから入れておけばいいかと。



### Use prettier

```shell
? Use prettier (Use arrow keys)
> no
  yes
```

`Prettier` を利用するかどうか聞かれます。

`Prettier` は今話題のコードフォーマッターらしいのですが、使ったことないです。

リントツールである `ESLint` と機能がかぶる部分もありますがコードフォーマッター部分を連動させたりすることも出来るらしく、今回は入れて使ってみようと思います。



### Author name

```shell
? Author name (kurararara)
```

作成者名を聞かれます。



### Choose a package manager

```shell
? Choose a package manager (Use arrow keys)
> npm
  yarn
```

パッケージマネージャーに `npm` と `yarn` のどちらを使うか聞かれます。




### Please wait a minute...

この後、プロジェクト作成が行われ、

```shell
  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 を使った場合

```shell
> cd my-project
> yarn run dev
```
- npm を使った場合

```shell
> cd my-project
> npm run dev
```
起動したら…

```shell
<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>` タグ直下の空行を削除すればエラーは消えました。

```css:pages/index.vue
<style>
			/* <= この空行が駄目らしい */ 
.container {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* 中略 */

</style>
```

修正が終わったら

```shell
» pages\index.vue

√ Client
  Compiled successfully in 422.30ms
```

エラー解消して起動が完了しています。



気を取り直して [http://localhost:3000/](http://localhost:3000/) にアクセスです！
![nuxtjs.png](https://qiita-image-store.s3.amazonaws.com/0/135956/bbb2a928-133a-0991-57d3-6580f551b9d3.png)
いえい！




## まとめ

`Vue CLI` のときにも書きましたが、プロジェクト作成から起動までの速度がかなり早いです！

初めて触れるプログラミング言語って、ブログとか記事は読むけどなかなか手を動かすところまではいけないんですよね～

実際のところ、**読んだだけじゃ全然身になってない**んですけどね（汗）

Nuxt.js の導入は難易度も高くなくすぐにアプリ起動までだどりつけますので、騙されたと思って**起動までやってみるとモチベーションアップに繋がる**かも？！

（~~同じ文章の使い回しすんません~~）



## インデックスページから来た人向け

思いっきし軌道修正（~~というか方向修正~~） しちゃいましたが、色々なことに触れて少しずつ進めていきますので、よかったら他の記事も見てみてください！


:link: [Vue.js 初心者がなにか作りきってみる（願望）](https://qiita.com/kurararara/items/9c4f78eb42e657221c06)