Linux(ubuntu)環境でVue.js/Nuxt.js試行（その１：「create-nuxt-app」）

# お題
表題のお試し。npm付属のnpxでなくyarnを使う方でNuxtプロジェクトを生成するだけ。

# 対象読者
Linux(ubuntu)環境を開発用の端末に使っていて、これから`Nuxt.js`を使ってみようと思っている人。

# 開発環境
### # OS
```
$ cat /etc/os-release 
NAME="Ubuntu"
VERSION="18.04.1 LTS (Bionic Beaver)"
```

### # yarn
```
$ yarn -v
1.12.3
```

## 参考
■Vue.js
https://jp.vuejs.org/v2/guide/

■Nuxt.js
https://ja.nuxtjs.org/guide/

■yarn
https://yarnpkg.com/ja/

# 実践

## `yarn`でプロジェクト作成

### 参考
https://ja.nuxtjs.org/guide/installation/

### ■コマンド実行
※作成するルートディレクトリ名は「`try001`」とする。

```
$ yarn create nuxt-app try001
yarn create v1.12.3
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "create-nuxt-app@2.1.1" with binaries:
      - create-nuxt-app
[###################################################################################################################################################################################################] 385/385> Generating Nuxt.js project in /home/sky0621/work/src/go111/src/github.com/sky0621/try-nuxt.js/try001
```

### ■プロジェクト名を入力
デフォルトではプロジェクト作成コマンドに渡したルートディレクトリ名が使われる。
例えば、この名前をルートディレクトリ名（`try001`）と異なるものにしてみる。

```
? Project name (try001) prj001
```

プロジェクト作成後に上記の名前が反映される先は下記。

- README.md
- package.json（の「`"name"`」）

### ■プロジェクト説明文を入力
デフォルトでは「`My top-notch Nuxt.js project`」となる。
例えば、この説明文を「`My-Initial-Nuxt.js-Project`」にしてみる。

```
? Project description (My top-notch Nuxt.js project) My-Initial-Nuxt.js-Project
```

プロジェクト作成後に上記の説明文が反映される先は下記。

- README.md
- package.json（の「`"description"`」）

### ■サーバーサイドフレームワークを選択
デフォルトでは「`none`」が選択される。
今回は「`express`」を採用してみる。
expressについては下記参照。
https://expressjs.com

```
? Use a custom server framework 
  none 
❯ express 
  koa 
  adonis 
  hapi 
  feathers 
  micro 
```

### ■UIフレームワークを選択
デフォルトでは「`none`」が選択される。
今回は「`vuetify`」を採用してみる。
vuetifyについては下記参照。
https://vuetifyjs.com/en/getting-started/quick-start

```
? Use a custom UI framework 
  none 
  bootstrap 
❯ vuetify 
  bulma 
  tailwind 
  element-ui 
  buefy 
```

### ■レンダリングモードを選択
デフォルトでは「`Universal`」が選択される。
今回は「`Single Page App`」を採用してみる。
両者の説明については下記参照。
https://ja.nuxtjs.org/guide/#%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%82%B5%E3%82%A4%E3%83%89%E3%83%AC%E3%83%B3%E3%83%80%E3%83%AA%E3%83%B3%E3%82%B0-%E3%83%A6%E3%83%8B%E3%83%90%E3%83%BC%E3%82%B5%E3%83%AB-ssr-

```
? Choose rendering mode 
  Universal 
❯ Single Page App 
```

### ■HTTPクライアントとしてAxiosを使うか否かを選択
デフォルトでは未使用。
今回は使用する。
Axiosモジュールについては下記参照。
https://axios.nuxtjs.org/
Axios自体については下記参照。
https://github.com/axios/axios/blob/master/README.md

```
? Use axios module 
  no 
❯ yes 
```

### ■静的検証ツールとしてESLintを使うか否かを選択
デフォルトでは未使用。
今回は使用する。
ESLintについては下記参照。
https://eslint.org

```
? Use eslint 
  no 
❯ yes 
```

### ■コードフォーマッターとしてprettierを使うか否かを選択
デフォルトでは未使用。
今回は使用する。
prettierについては下記参照。
https://prettier.io
また、ESLintの方にもコードフォーマット機能はあるのにprettierを使う理由については下記参照。
https://qiita.com/soarflat/items/06377f3b96964964a65d

```
? Use prettier 
  no 
❯ yes
```

### ■プロジェクト作成者を入力
デフォルトでは、Githubアカウント(?)が使われる。
今回はデフォルトのまま。

```
? Author name (sky0621) 
```

### ■パッケージマネージャを選択
デフォルトでは「`npm`」が選択される。
今回は「`yarn`」を採用。

```
? Choose a package manager 
  npm 
❯ yarn 
```

### ■最終結果

```
? Project name prj001
? Project description My-Initial-Nuxt.js-Project
? Use a custom server framework express
? Use a custom UI framework vuetify
? Choose rendering mode Single Page App
? Use axios module yes
? Use eslint yes
? Use prettier yes
? Author name sky0621
? Choose a package manager yarn
Initialized empty Git repository in /home/sky0621/work/src/go111/src/github.com/sky0621/try-nuxt.js/try001/.git/
yarn install v1.12.3
info No lockfile found.
[1/4] Resolving packages...
warning eslint > file-entry-cache > flat-cache > circular-json@0.3.3: CircularJSON is in maintenance only, flatted is its successor.
[2/4] Fetching packages...
info fsevents@1.2.4: The platform "linux" is incompatible with this module.
info "fsevents@1.2.4" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning " > vuetify@1.4.0" has unmet peer dependency "vue@^2.5.18".
warning " > eslint-loader@2.1.1" has unmet peer dependency "webpack@>=2.0.0 <5.0.0".
warning " > eslint-plugin-vue@4.7.1" has incorrect peer dependency "eslint@^3.18.0 || ^4.0.0".
[4/4] Building fresh packages...
success Saved lockfile.
Done in 12.03s.

  To get started:

    cd try001
    yarn run dev

  To build & start for production:

    cd try001
    yarn run build
    yarn start

Done in 2219.03s.
```

## 作成プロジェクトのディレクトリ構造
Nuxt.js独自のディレクトリ構造については下記参照。
https://ja.nuxtjs.org/guide/directory-structure/

```
try001/
├── README.md
├── assets
│   ├── README.md
│   └── style
│       └── app.styl
├── components
│   ├── Logo.vue
│   ├── README.md
│   └── VuetifyLogo.vue
├── layouts
│   ├── README.md
│   └── default.vue
├── middleware
│   └── README.md
├── node_modules
│   └── 【省略】
│　　　　　　・・・
├── nuxt.config.js
├── package.json
├── pages
│   ├── README.md
│   ├── index.vue
│   └── inspire.vue
├── plugins
│   ├── README.md
│   └── vuetify.js
├── server
│   └── index.js
├── static
│   ├── README.md
│   ├── favicon.ico
│   └── v.png
├── store
│   └── README.md
└── yarn.lock
```

## 依存モジュールのバージョン
`package.json`の内容より、以下の通り。

```
    "nuxt": "^2.0.0",
    "express": "^4.16.3",
    "vuetify": "^1.2.4",
    "@nuxtjs/axios": "^5.0.0"
    "eslint": "^5.0.1",
    "prettier": "1.14.3",
```

## 動作確認

### yarnで起動
```
$ cd try001/
$ yarn run dev
yarn run v1.12.3
$ cross-env NODE_ENV=development nodemon server/index.js --watch server
[nodemon] 1.18.9
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: /home/sky0621/work/src/go111/src/github.com/sky0621/try-nuxt.js/try001/server/**/*
[nodemon] starting `node server/index.js`
ℹ Preparing project for development                                                                                                                                                                15:06:29
ℹ Initial build may take a while                                                                                                                                                                   15:06:29
✔ Builder initialized                                                                                                                                                                              15:06:29
✔ Nuxt files generated                                                                                                                                                                             15:06:29

✖ Client
  Compiled with some errors in 11.50s


 ERROR  Failed to compile with 1 errors                                                                                                                                            friendly-errors 15:06:41


 ERROR  in ./layouts/default.vue                                                                                                                                                   friendly-errors 15:06:41

Module Error (from ./node_modules/eslint-loader/index.js):                                                                                                                         friendly-errors 15:06:41

/home/sky0621/work/src/go111/src/github.com/sky0621/try-nuxt.js/try001/layouts/default.vue
   89:1  error  Delete `··`                           prettier/prettier
   90:3  error  Delete `··`                           prettier/prettier
   91:1  error  Replace `······` with `····`          prettier/prettier
   92:1  error  Delete `··`                           prettier/prettier
   93:1  error  Replace `········` with `······`      prettier/prettier
   94:1  error  Delete `··`                           prettier/prettier
   95:1  error  Replace `········` with `······`      prettier/prettier
   96:1  error  Delete `··`                           prettier/prettier
   97:1  error  Replace `··········` with `········`  prettier/prettier
   98:7  error  Delete `··`                           prettier/prettier
   99:1  error  Delete `··`                           prettier/prettier
  100:7  error  Delete `··`                           prettier/prettier
  101:1  error  Delete `··`                           prettier/prettier
  102:7  error  Delete `··`                           prettier/prettier
  103:5  error  Delete `··`                           prettier/prettier
  104:1  error  Replace `····` with `··`              prettier/prettier
  105:1  error  Delete `··`                           prettier/prettier

✖ 17 problems (17 errors, 0 warnings)
  17 errors and 0 warnings potentially fixable with the `--fix` option.

                                                                                                                                                                                   friendly-errors 15:06:41
 @ ./.nuxt/App.js 4:0-47 6:14-23
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi webpack-hot-middleware/client?name=client&reload=true&timeout=30000&path=/__webpack_hmr/client ./.nuxt/client.js
                                                                                                                                                                                   friendly-errors 15:06:41
ℹ Waiting for file changes                                                                                                                                                                         15:06:41

 READY  Server listening on http://127.0.0.1:3000                                                                                                                                                  15:06:41
```

`prettier`さんに怒られた。

### 問題解消
下記を参考に修正。
https://qiita.com/bellx2/items/9ff80594d57ff36fa0b1

```
$ yarn run lint --fix
yarn run v1.12.3
$ eslint --ext .js,.vue --ignore-path .gitignore . --fix
Done in 1.38s.
```

### 再実行
```
$ yarn run dev
yarn run v1.12.3
$ cross-env NODE_ENV=development nodemon server/index.js --watch server
[nodemon] 1.18.9
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: /home/sky0621/work/src/go111/src/github.com/sky0621/try-nuxt.js/try001/server/**/*
[nodemon] starting `node server/index.js`
ℹ Preparing project for development                                                                                                                                                                15:20:29
ℹ Initial build may take a while                                                                                                                                                                   15:20:29
✔ Builder initialized                                                                                                                                                                              15:20:29
✔ Nuxt files generated                                                                                                                                                                             15:20:29

✔ Client
  Compiled successfully in 10.41s

ℹ Waiting for file changes                                                                                                                                                                         15:20:40

 READY  Server listening on http://127.0.0.1:3000                                                                                                                                                  15:20:40
```

今度は成功した様子。
「`http://localhost:3000/`」にアクセスしてみると。

![Opera スナップショット_2019-01-06_152226_localhost.png](https://qiita-image-store.s3.amazonaws.com/0/180599/64769d28-7808-e2e9-0642-aaa8142838f5.png)

これにて、プロジェクト作成は終了。
今後は、ここで作ったプロジェクトをいじりながら、`Nuxt.js`自体や`Vuetify`、`Axios`といったところを掘り下げていこう。