Nuxt.js 入門 (2) - プロジェクトの作成

「Nuxt.js」のプロジェクトの作成手順をまとめました。

・Nuxt.js 2.15.8

前回

1. プロジェクトの作成

プロジェクトの作成手順は、次のとおりです。

(1) 以下のコマンドで、プロジェクトの作成を開始。

$ npx create-nuxt-app nuxt_app

(2) プロジェクト名を聞かれるので入力。
今回は、そのままEnterキーで決定します。

? Project name: (nuxt_app)

(3) プログラミング言語の選択肢が表示されるので、上下キーで選択して、Enterキーで決定。
今回は、そのままEnterキーで決定します。

? Programming language:
❯ JavaScript
  TypeScript

(4) パッケージマネージャの選択肢が表示されるので、上下キーで選択して、Enterキーで決定。
今回は、そのままEnterキーで決定します。

? Package manager:
❯ Yarn
  Npm

(5) UIフレームワークの選択肢が表示されるので、上下キーで選択して、Enterキーで決定。
今回は、そのままEnterキーで決定します。

? UI framework: (Use arrow keys)
❯ None
  Ant Design Vue
  BalmUI
  Bootstrap Vue
  Buefy
  Chakra UI
  Element
  Framevuerk
  Oruga
  Tachyons
  Tailwind CSS
  Windi CSS
  Vant
  View UI
  Vuetify.js

(6) Nuxt.jsモジュールの選択肢が表示されるので、上下キーで選択して、スペースでチェックして、Enterキーで決定。
今回は、そのままEnterキーで決定します。

? Nuxt.js modules:
❯◯ Axios - Promise based HTTP client
  ◯ Progressive Web App (PWA)
  ◯ Content - Git-based headless CMS

(7) Lintの選択肢が表示されるので、上下キーで選択して、スペースでチェックして、Enterキーで決定。
今回は、そのままEnterキーで決定します。

? Linting tools:
❯◯ ESLint
  ◯ Prettier
  ◯ Lint staged files
  ◯ StyleLint
  ◯ Commitlint

(8) テストフレームワークの選択肢が表示されるので、上下キーで選択して、Enterキーで決定。
今回は、そのままEnterキーで決定します。

? Testing framework: (Use arrow keys)
❯ None
  Jest
  AVA
  WebdriverIO
  Nightwatch

(9) レンダリングモード（サーバー側でレンダリングするかどうか）の選択肢が表示されるので、上下キーで選択して、Enterキーで決定。
今回は、そのままEnterキーで決定します。

? Rendering mode:
❯ Universal (SSR / SSG)
  Single Page App

(10)  デプロイターゲットの選択肢が表示されるので、上下キーで選択して、Enterキーで決定。
今回は、そのままEnterキーで決定します。

? Deployment target:
❯ Server (Node.js hosting)
  Static (Static/Jamstack hosting)

(11) 開発ツールの選択肢が表示されるので、上下キーで選択して、スペースでチェックして、Enterキーで決定。
今回は、そのままEnterキーで決定します。

? Development tools:
❯◯ jsconfig.json (Recommended for VS Code if you're not using typescript)
  ◯ Semantic Pull Requests
  ◯ Dependabot (For auto-updating dependencies, GitHub only)

(12) GitHubのユーザー名を聞かれるので入力。
今回は、そのままEnterキーで決定します。

?What is your GitHub username? (XXXX)

(13) バージョン管理システムの選択肢が表示されるので、上下キーで選択して、Enterキーで決定。
今回は、そのままEnterキーで決定します。

Version control system: (Use arrow keys)
❯ Git
  None

プロジェクトの作成が成功すると、以下のように表示されます。

🎉 Successfully created project nuxt_app

To get started:

cd nuxt_app
yarn dev

To build & start for production:

cd nuxt_app
yarn build
yarn start

2. プロジェクトの実行

プロジェクトの実行手順は、次のとおりです。

(1) プロジェクトフォルダ(nuxt_app)で以下のコマンドを実行。

$ yarn dev

(2) ブラウザで「http://localhost:3000/」を開く。
以下の画面が表示されます。

3. プロジェクトのフォルダ構成

プロジェクトのフォルダ構成は、次のとおりです。

・.git : Gitの設定ファイル
・.nuxt : Nuxt.jsのアプリケーション
・components : コンポーネント
・node_modules : npmのパッケージ群
・pages : ページファイル群
・static : 画像などの静的ファイル群
・store : データ管理のファイル群

・.editorconfig : エディタの設定情報
・.gitnore : Gitの設定ファイル
・nuxt.config.js : Nuxt.jsのの設定ファイル
・package.json : npmのパッケージ管理の設定ファイル
・README.md : README

次回