Nuxt.js で Vueプロジェクトを作ってみる

#はじめに
Nuxt使えばすっごく簡単にWebページ作れたよって話です。
[Nuxt.js インストール](https://ja.nuxtjs.org/guide/installation) のページに書いてあることをやってみたという記事です。
詳しい設定ファイルの内容や具体的なコードについては今回書いていません。

## Nuxt.jsとは
[公式サイト](https://ja.nuxtjs.org/guide/) より
> Nuxt.js は Vue アプリケーションを作成するフレームワークです。

Vueの設定を予めプリセットしてくれていたり、ルーティングの定義をファイル作成でやってくれたり、Vue で動くページを作るのがとても簡単・楽になる。

# Nuxt導入
では実際に導入していきます。

## 環境
Node.jsをインストールしておいてください。

バージョンは以下で行いました。
* Node v10.15.0
* npm 6.4.1

## 導入作業

プロジェクトを作成したいディレクトリに移動し、コマンドを実行。

```
PS D:\git> npx create-nuxt-app <プロジェクト名>
```

プロジェクト名や使いたいサーバーフレームワーク、UIフレームワーク、テストフレームワークなどなど聞かれるので矢印キーで選択してエンターを押していく。

```
npx: installed 407 in 6.499s
> Generating Nuxt.js project in D:\git\vue_study
? Project name vue_study
? Project description My phenomenal Nuxt.js project
? Use a custom server framework none
? Choose features to install
? Use a custom UI framework vuetify
? Use a custom test framework none
? Choose rendering mode Single Page App
? Author name
? Choose a package manager npm
```

最後まで選ぶとプロジェクトの生成が始まる。

```
Reinitialized existing Git repository in D:/git/vue_study/.git/

> nodemon@1.18.10 postinstall D:\git\vue_study\node_modules\nodemon
> node bin/postinstall || exit 0

Love nodemon? You can now support the project via the open collective:
 > https://opencollective.com/nodemon/donate


> nuxt@2.4.3 postinstall D:\git\vue_study\node_modules\nuxt
> opencollective || exit 0


                                     :-:
                                   .==-+:
                                  .==. :+- .-=-
                                 .==.   :==++-+=.
                                :==.     -**: :+=.
                               :+-      :*+++. .++.
                              :+-      -*= .++: .=+.
                             -+:      =*-   .+*: .=+:
                            -+:     .=*-     .=*-  =+:
                          .==:     .+*:        -*-  -+-
                         .=+:.....:+*-.........:=*=..=*-
                         .-=------=++============++====:

                          Thanks for installing nuxtjs
                 Please consider donating to our open collective
                        to help us maintain this package.

                           Number of contributors: 167
                              Number of backers: 160
                            Annual budget: US$ 45,815
                           Current balance: US$ 12,364

             Donate: https://opencollective.com/nuxtjs/donate

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.7 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.7: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 996 packages from 596 contributors and audited 14057 packages in 32.898s
found 0 vulnerabilities
```
あとは見てれば終わります！

## 実行
npm コマンドを実行します。

```
npm install
npm run dev
```

これで必要なモジュールのインストールとタスクの実行が完了するので以下URLにアクセスすると。。。
`http://localhost:3000/`

こんな感じでページが表示されます。
とっても簡単ですね！
![nuxt_ready.PNG](https://qiita-image-store.s3.amazonaws.com/0/357288/b8bb6770-6d31-d2d1-2fb1-01e356ac601a.png)

# 中身を少し見てみる
作成されたプロジェクトのファイルの中身を少し見てみましょう。
レイアウトに関する部分をピックアップします。

## pages
この中にファイルを作成すると、勝手に vue-router の設定を生成してくれます。

```
pages
- index.vue
- inspire.vue
```
こういうファイルを作れば↓の2つのURLのページが生成されます。
`http://localhost:3000/`
`http://localhost:3000/inspire`

vue の場合に記載する以下を勝手にやってくれるということですね。

```vuejs

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'inspire',
      path: '/inspire',
      component: 'pages/inspire.vue'
    }
 ]
}
```

## layouts
この中に共通のレイアウトを定義します。
`default.vue` が共通レイアウトです。
この他にもエラー時のレイアウトを定義したりします。

## components
vueコンポーネントはここに入れます。

# 感想・雑記
基本的なことは[公式サイト](https://ja.nuxtjs.org/) に書いてあるのですが、実際どうなんだろうということでやってみました。
コマンドいくつかであっという間にできてとても簡単でした！

1からvueプロジェクト作る場合とも比べてルーター自動で定義してくれたり必要なモジュールインストールしてくれてたりと構築だけでなく実装面も楽ですね。