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

typescript

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

setup
npm install --save-dev @nuxt/typescript-build @nuxt/types でtypescript環境構築します

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

  "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 を実行で更新