p-t-a-p-1

🍇

Nuxt.jsの初期コマンドについて

2022/03/31

Nuxtのプロジェクト構築時には以下のコマンドが叩けるようになってます。

npmコマンドの場合は npm run ${key} 、
Yarnコマンドの場合は yarn ${key} で各種コマンドが実行できるようになります

例：キーが dev の場合

npmコマンドの場合は npm run dev 、
Yarnコマンドの場合は yarn dev で nuxt コマンドを実行することができます。

...
"scripts": {
  "dev": "nuxt",
  "build": "nuxt build",
  "start": "nuxt start",
  "generate": "nuxt generate",
  "lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
  "lint": "yarn lint:js",
  "lintfix": "yarn lint:js --fix"
},
...

...
"scripts": {
  "dev": "nuxt",
  "build": "nuxt build",
  "start": "nuxt start",
  "generate": "nuxt generate",
  "lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
  "lint": "yarn lint:js",
  "lintfix": "yarn lint:js --fix"
},
...

※ プロジェクトを落とすときは ctrl + c

初期コマンドについて

dev

→ 開発サーバーをlocalhostの3000ポートで起動

ホットリロード機能があることから、基本的に開発する際はこちらを実行します。

build

→ アプリケーションをwebpackでビルドし、JSとCSSをミニファイ化

本番用のアプリケーションをビルドするためのもので、SSRのときに使う

解析

※ nuxt build --analyze でプロジェクトに対してどのライブラリがどれくらいの割合を占めているか可視化することができます。

これは不要ライブラリを見つけたり、
大きいライブラリは代替できるライブラリがあるか検討するために使うことがあります。

nuxt-commands-1.png

nuxt-commands-2.png

→ ファイルが出力されます

start

→ アプリケーションを本番用で起動

SSGの場合は、dist/ 内をルートとして起動される
→ デプロイ前のローカルテストに使う

generate

→ ビルドして、dist/ に静的にファイル出力する

SSGのときに使う

lint:js

ESLintでのコードチェック

不要なカンマだったりh2タグ内のテキストが改行されていないなどのコードのエラーが表示されます。

nuxt-commands-3.png

lint

こちらもESLintでのコードチェック

コマンド見ると yarn lint:js を実行しているので上記と同じ

nuxt-commands-4.png

lint:js での実行結果と同じになっている

lintfix

Lintエラーを一括で治してくれる

yarn dev で開発してるときや yarn lint で出てくるLintエラーを
一つずつ手作業で治すのは大変です..

一括整形してくれるのでよく使うことが多いです

BLOG一覧へ