NuxtJSのインストールから起動までの導入方法

Vueを活用する中で、

「NuxtJS」

のフレームワークを使用して、

各種APIを作成するなど、

小さな規模から試そうと考え、

公式サイトを見ながら、

導入して起動するまでを試した。

その時のNuxtJSの導入に関して、

個人的にメモを残す。

参考サイト（公式サイト）

こちらのサイトを参考にしました。

リンクをメモ。

NuxtJSの公式サイト

NuxtJSの導入のコマンド

公式サイトの通りに、

順番にコマンドを実行していく。

導入コマンド

npm init nuxt-app project-name

導入時の設定

プロジェクト名の設定

$ npm init nuxt-app project-name
✨  Generating Nuxt.js project in Office-Management
? Project name: (project-name)　

上記で入力するか、そのままでよければ、何もせず、Enterキーを押す

プログラミング言語の設定

? Programming language: (Use arrow keys)　←JS/TSの選択
❯ JavaScript
  TypeScript

上記で自分が使いたい方を選び、Enterキーを押す

パッケージ管理方法の設定

? Package manager: (Use arrow keys)
❯ Yarn
  Npm

上記で自分が使いたいパッケージ管理方法を選び、Enterキーを押す

UIフレームワークの設定

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

上記で自分が使いたいUIフレームワークを選び、Enterキーを押す
※何も使用しない場合は「None」を選択

導入モジュールの選択

? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◯ Axios - Promise based HTTP client
 ◯ Progressive Web App (PWA)
 ◯ Content - Git-based headless CMS

上記で自分が使いたいモジュールを選び、Enterキーを押す
※選択はSPACEキーで選択/未選択を切り替えます。
※デフォルトはすべて未選択になっています。
※何も使用しない場合はチェックを付けない。

構文チェックツールの選択

? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◯ ESLint
 ◯ Prettier
 ◯ Lint staged files
 ◯ StyleLint
 ◯ Commitlint

上記で自分が使いたい構文チェックツールを選び、Enterキーを押す
※選択はSPACEキーで選択/未選択を切り替えます。
※デフォルトはすべて未選択になっています。
※何も使用しない場合はチェックを付けない。

テストフレームワークの選択

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

上記で自分が使いたいテストフレームワークを選び、Enterキーを押す
※何も使用しない場合は「None」を選択

レンダリング方法を選択

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

上記で自分が行いたいレンダリング方法を選択

デプロイ方法の選択

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

上記で自分が行いたいデプロイ方法を選択

開発ツールの選択

? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◯ jsconfig.json (Recommended for VS Code if you're not using typescript)
 ◯ Semantic Pull Requests
 ◯ Dependabot (For auto-updating dependencies, GitHub only)

上記で自分が行いたい開発ツールを選択
※選択はSPACEキーで選択/未選択を切り替えます。
※デフォルトはすべて未選択になっています。
※何も使用しない場合はチェックを付けない。

Githubの設定

? What is your GitHub username? ()

自分が使っているGithubがあれば設定
※何もGithubを使用しない場合はそのままEnterキーを押す。

バージョン管理ツールの選択

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

上記で自分が使いたいバージョン管理ツールを選択
※何も使用しない場合は「None」を選択

導入処理の完了

上記の導入設定を行い、

導入処理が完了すると以下の表示になる。

🎉  Successfully created project project-name

  To get started:

	cd project-name
	npm run dev

  To build & start for production:

	cd project-name
	npm run build
	npm run start