Nuxt 2.7 + typescript + npm 環境構築メモ

# はじめに

Next.jsを１年半くらい仕事でやったので、Nuxtってどうなんだろうって思って環境構築したときのメモ。需要ないかなぁと思ったけどwindowsだとエラーも出たので、誰かの役につかなと思い残します。

2系のインストールを終えてから3系に気づき、３系を触ることにしました・・・。

# インストール

インストールはnpxコマンドで行います。`npx create-nuxt-app`
npxコマンドはnpmバージョン5.2.0より同梱されているコマンドで、ローカルにインストールしたコマンドを実行するために使われます。

①プロジェクト名を入力

②Typescriptを選択

③Npmを選択

④UIフレームワークはnone

⑤templateエンジンはhtml

⑥モジュールはaxiosのみ（もちろん後からでも追加できる）

⑦Lintはいったんなしで（vs codeで追加する）

⑧テスティングフレームワークも今はなし

⑨レンダリングはUniversal

⑩developmentはServer（Node.js hosting）

⑪developementツールはjs.config

⑫gitアカウントなし

⑬gitもnone

基本的に後から何とでもなるのでnoneで良いと思う。

npm buildでエラーとなる

> ERROR Rule can only have one resource source (provided resource and test + include + exclude)

直前のwarningがwebpackのバージョンだったので指定バージョンをインストール

`npm i -D webpack@^4.46.0`

npm buildでエラー内容が変わる

`ERROR  Error: error:0308010C:digital envelope routines::unsupported`
OpenSSLのエラーです。

一時対応として、package.jsonの`nuxt build`コマンドを変更します。

`NODE_OPTIONS='--openssl-legacy-provider' nuxt build`

windows環境だと
`'NODE_OPTIONS' is not recognized as an internal or external command,operable program or batch file.`
のエラーが表示されます。

`npm install -g win-node-env`

をインストールします。

再度 `npm run build` します。

`Error: PostCSS plugin postcss-import requires PostCSS 8.`

エラーが出ます。

`npm install postcss --save-dev`

でインストールします。

`npm run start`

起動して、`http://localhost:3000/` にアクセスするとwelcomeページが表示される。

# ディレクトリ確認

node_modulesは省略

```
/
│  .editorconfig
│  .gitignore
│  jsconfig.json ... コンパイルするための設定など
│  nuxt.config.js ... nuxtの設定ファイル
│  package-lock.json
│  package.json
│  README.md
│  tsconfig.json
│
├─.nuxt
│  │  App.js
│  │  axios.js
│  │  client.js
│  │  empty.js
│  │  index.js
│  │  jsonp.js
│  │  loading.html
│  │  middleware.js
│  │  router.js
│  │  router.scrollBehavior.js
│  │  routes.json
│  │  server.js
│  │  utils.js
│  │
│  ├─components
│  │      index.js
│  │      nuxt-child.js
│  │      nuxt-error.vue
│  │      nuxt-link.client.js
│  │      nuxt-link.server.js
│  │      nuxt-loading.vue
│  │      nuxt.js
│  │      plugin.js
│  │      readme.md
│  │
│  ├─dist
│  │  ├─client
│  │  │      1443b89.js
│  │  │      5a1b27b.js
│  │  │      c28d1c2.js
│  │  │      d6460b3.js
│  │  │      e4b7e62.js
│  │  │      f8db2cc.js
│  │  │      LICENSES
│  │  │
│  │  └─server
│  │      │  client.manifest.json
│  │      │  index.spa.html
│  │      │  index.ssr.html
│  │      │  server.js
│  │      │  server.js.map
│  │      │  server.manifest.json
│  │      │
│  │      ├─components
│  │      │      nuxt-logo.js
│  │      │      nuxt-logo.js.map
│  │      │      tutorial.js
│  │      │      tutorial.js.map
│  │      │
│  │      └─pages
│  │              index.js
│  │              index.js.map
│  │
│  ├─layouts
│  │      default.vue
│  │
│  ├─mixins
│  │      fetch.client.js
│  │      fetch.server.js
│  │
│  ├─vetur
│  │      tags.json
│  │
│  └─views
│          app.template.html
│          error.html
│
├─components ... コンポーネントとして切り出されたファイル
│      NuxtLogo.vue
│      Tutorial.vue
│
├─pages ... 各画面ごとのページファイル
│      index.vue
│
├─static
│      favicon.ico
│
└─store
        README.md
```

.nuxtの下にしかlayoutsフォルダがありません。気持ち悪いので自分でルート直下にlayoutsフォルダを作ります。


## pages
自動ルーティングがそのまま採用されているなら、ディレクトリ構造はそのままURLのパスを反映しています
アンダースコアで始まる名前 _id のファイルおよびディレクトリは、そこがパラメータになることを表しています。
（nextjsの場合 \[id\] ですね。)
`this.$route.params.id` で参照します。

## components
コンポーネントとして切り出されたファイル。これらがページファイルでインポートして使われる。

## layouts
レイアウトファイル。ベースとなるファイル。

## store
storeにはmdファイルのみ入っており必須でないこととstoreディレクトリの説明が記述されている。
Vuex の状態やアクションを定義するファイルが置かれる。
`this.$store.getter('fileName/getterName')` でアクセスします。
今は、そんなものがあるんだなぁで大丈夫です。

# VS Code

## 拡張機能

* Vetur
Vue用のシンタックスハイライトやコード補完などをしてくれます。これがあるとVueの構造が視覚的にわかるようになります
なぜかうまく動作しなかった `use @volar-plugins/vetur instead of vetur` ので、Vue Volar extension Pack をインストールしました。
* ESLint
* Prettier
Lintです。お好みでインストールしてください

### chrome
chrome拡張機能 [Vue用のDevTools](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd/related?hl=ja)

# typescript

`npx create-nuxt-app`でtypescriptを選択していなかった場合は、以下手順を読んでtypescriptで開発できるようにします。

[setup](https://typescript.nuxtjs.org/ja/guide/setup/)
`npm install --save-dev @nuxt/typescript-build @nuxt/types` でtypescript環境構築します

tsconfigで特別指定しなければ、vueのバージョンは3らしい。今回、vue2.7でインストールしたので、バージョンミスマッチの警告が出ている。
tsconfigに以下を追加する

```yaml
  "vueCompilerOptions": {
    "target": 2.7
  }
```

と言うかNUXT 3の安定板が2022年11月にリリースされているので、そっちを利用することを検討する

# コマンド

| コマンド      | 説明                                                                                                                      |
| :------------ | :------------------------------------------------------------------------------------------------------------------------ |
| nuxt          | 開発サーバーを起動します。このコマンドで起動したサーバーはソースに変更があった場合は即座に反映される。（ホットリロード）  |
| nuxt build    | アプリをWebpackとしてビルドします。このコマンドは「nuxt startコマンド」の前に実行する必要があります。                     |
| nuxt start    | プロダクションモードでサーバーを起動します。                                                                              |
| nuxt generate | Nuxt.jsの静的ジェネレータの機能を使う際に使用するコマンドです。このコマンドでの出力結果は、distディレクトリに配置されます |

nuxt(開発サーバー）を起動すると、.nuxt/dist が削除される。ちゃんとトランスパイルされてるかなぁと確認しようとしてフォルダがなくて焦った。
とりあえず、ホットリロードされているのは確認できたので、仕組みは突っ込んで確認しないこととする

# npx

npxコマンドはnpmバージョン5.2.0より同梱されているコマンドで、ローカルにインストールしたコマンドを実行するために使われます。

npmを使ってスクリプトを実行するにはpackage.jsonのscriptsへ予めスクリプトを定義しておく必要があります。
一方で、npxであれば、**インストールされていないコマンドであっても自動的に探してインストール、実行まで行ってくれます。**
実行したあとはパッケージの除去まで行ってくれます。

* インストール済みモジュールの実行
`npx <インストール済みモジュール名>`

* インストールしていないモジュールを実行（実行後に自動削除）
`npx <未インストールのモジュール名>`

* GitHub上の特定リポジトリを明示的に指定して実行
`npx github:<リポジトリ名>`

* npm用の依存関係アップデート確認
`npx npm-check-updates`

* 更新があるパッケージを確認
`npx npm-check-updates -u`
上記実行後 `npm install` を実行で更新