Nuxt.jsプロジェクトの作成から動作確認までの手順

はじめに

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プロジェクトの初期設定としていろいろと聞かれるので答えていきます。

設定項目 説明 設定例
Project name そのままReturnでOK。後から変更できます。 -
Project description そのままReturnでOK。後から変更できます。 -
Author name そのままReturnでOK。後から変更できます。 -
Package Manager 使い慣れているほうでOK。 Npm
UI framework Vue用のBootstrapであるBootstrap Vueがおすすめ。後から変更できます。 Bootstrap Vue
Server framework Noneでいいと思います(使ったことないからよくわからない)。 None
Modules Ajaxを使うならAxios、環境変数を使うならDotEnvを選択。後から追加できます。 (選択なし)
Linting tools Lintは厳密な静的解析ツールです。複数人で開発しているときにコードを統一的にしたい場合などは選択。 (選択なし)
Test framework テストを書く場合は選択。 (選択なし)
Rendering mode レンダリングをサーバーで行う場合はUniversal (SSR)、ブラウザで行う場合はSingle Page Appを選択。後から変更できます。 Universal (SSR)
Development tools よくわかりませんが、VS Codeを使っているのでjsconfig.jsonを選択。 jsconfig.json

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

サーバー起動/動作確認

プロジェクトの作成が完了したら以下のコマンドを実行して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プロジェクトの作成手順はたくさんありますが、自分用の備忘録として作成しました。

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