はじめに

Nuxt.jsでプロジェクトを作成し、最初の動作確認としてテストサーバーを起動してブラウザで表示するところまでの手順を解説します。

前提

• macOS
• Node.js 13.11.0
• npm/npx 6.13.7
• Nuxt.js 2.11.0
• VS Code 1.42.1

Nuxt.jsプロジェクト作成

それでは、さっそくNuxt.jsプロジェクトを作成していきます。

プロジェクトディレクトリなどで以下のコマンドを実行します。

$ npx create-nuxt-app <project-name>

Nuxt.jsプロジェクトの初期設定としていろいろと聞かれるので答えていきます。

プロジェクト作成完了までしばらく待ちます。

サーバー起動／動作確認

プロジェクトの作成が完了したら以下のコマンドを実行してVS Codeでプロジェクトを開きます。

$ code <project-name>

VS Codeが起動したら、control + shift + @を押してターミナルを起動します。ターミナルで以下のコマンドを実行します。

$ npm run dev
...
   ╭─────────────────────────────────────────────╮
   │                                             │
   │   Nuxt.js v2.11.0                           │
   │   Running in development mode (universal)   │
   │                                             │
   │   Listening on: http://localhost:3000/      │
   │                                             │
   ╰─────────────────────────────────────────────╯

ブラウザで http://localhost:3000/ にアクセスし、以下のような画面が表示されればOKです。

npm run devはテストサーバーを起動するコマンドです。他のコマンドはpackage.jsonに定義されています。

{
  ...
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  ...
}

• npm run dev：テストサーバーを起動
• npm run build：プロジェクトをビルド
• npm run start：本番サーバーを起動
• npm run generate：プリレンダリング（静的生成）

npm run buildは、nuxt.config.jsに設定したモードでビルドを行います。

export default {
  mode: 'universal',
  ...
}

• universal：SSR（サーバーサイドレンダリング）
• spa：SPA（シングルページアプリケーション）

npm run generateは静的ページを生成します。動的ページのルーティングは無視されます（回避方法はいくつかあります）。

まとめ

Nuxt.jsプロジェクトの作成手順はたくさんありますが、自分用の備忘録として作成しました。

参考にしていただければ幸いです。