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

2020年3月15日 10:37

はじめに

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プロジェクトの作成手順はたくさんありますが、自分用の備忘録として作成しました。

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

関連記事

【Nuxt.js+Firebase】core-js関連のエラーが大量に出力される事象の原因と対処
# はじめに Nuxt.jsプロジェクトでFirebaseを使っていると、テストサーバー起動時やデプロイ時にcore-js関連のエラーが大量に出力されることがあります。 なぜエラーが出力されるのか、どうすれば解消できるのかをまとめました。 [...]
2020年6月9日 10:30
【Nuxt.js】GitHubからセキュリティアラートが届いたときの対応【package.json】
# はじめに GitHubでソース管理を行っているプロジェクトに`package.json`のセキュリティアラートが届いたときの対応を記載します。 今回はNuxt.jsで作成したプロジェクトでの対応記録のため、タイトルなどに「Nuxt.js [...]
2020年6月8日 18:01
【カテゴリ別】Nuxt.js関連の記事まとめ
# はじめに Nuxt.js関連の記事が増えてきたので、この記事でカテゴリ別にまとめたいと思います。 # 最初の一歩 - [Nuxt\.jsプロジェクトの作成から動作確認までの手順](https://www.autovice.jp/art [...]
2020年3月17日 10:40
Nuxt.jsプロジェクトでFirebase AuthenticationのGoogle認証でログインし、認証情報をLocal Storageに保存する
# はじめに この記事ではFirebase AuthenticationのGoogle認証を利用してログイン機能を作成し、そのログイン情報をブラウザのLocal Storageに保存する方法を解説します。 この記事で作成したNuxt.jsプ [...]
2020年3月17日 10:21
Nuxt.jsプロジェクトでFirebase Storageにアップロードした画像を変更/削除する
# はじめに 数回に分けてNuxt.jsプロジェクトでデータの永続化を行う方法を解説しています。これらの記事は上から順番に読んでいくことを想定しています。 - [Nuxt\.jsプロジェクトでFirestoreを利用したデータの永続化/取り [...]
2020年3月16日 16:52