初心者のNuxt.jsプロジェクト作成手順

Nuxt.js初心者だが勉強用にプロジェクト作成からやってみたのでカンタンに手順をまとめた。

bashを起動して以下のコマンドを打つ。

# npmのインストール(npmが無い場合)
$ sudo apt update
$ sudo apt install npm

# npxのインストール(npxが無い場合)
$ sudo npm install -g npx

# プロジェクトのフォルダを作成しフォルダ内にcd
$ mkdir sample
$ cd sample

# nuxtアプリケーションを構築
$ npx create-nuxt-app

上記のコマンドを実行すると質問が何個かされるので、以下のように答えていく。

Generating Nuxt.js project in hello
? Project name: (sample)

そのままEnter。（デフォルトのsampleという名前がプロジェクト名になる。）

? Programming language: (Use arrow keys)
❯ JavaScript
TypeScript

使用するプログラミング言語についての質問。
JavaScriptを選択してEnter。

? Package manager:
Yarn
❯ Npm

使用するパッケージマネージャーについての質問。
Npmを選択して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

使用するUIフレームワークについての質問。
今回はVuetify.jsを使いやってみるので、Vuetify.jsを選択してEnter。

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

Nuxt.jsのモジュールを追加するかどうかにについての質問。
Axiosを選択した状態でEnter。

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

使用するLinting tool(静的解析ツール)についての質問。
ESLintを選択した状態でEnter。

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

使用するテストフレームワークについての質問。
特に使わないのでNoneを選択した状態でEnter。

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

レンダリングモードについての質問。
Universalを選択した状態でEnter。

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

サーバーの動かし方についての質問。
Serverを選択した状態でEnter。

? Development tools: (Press ＜space＞ to select,＜a＞o 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)

開発ツールについての質問。
VS Codeを使用して開発を行うため、jsconfig.jsonを選択した状態でEnter。

? What is your GitHub username? (melos)

GitHubのユーザー名についての質問。
()が空の場合は自分のGitHubユーザー名を入力してEnter。

Version control system:
❯ Git
None

バージョンコントロールシステムについての質問。
Gitを選択した状態でEnter。

以上の質問に答え終わるとプロジェクト作成が行われる。
作成後、以下のコマンドを実行する。

# 開発用サーバーを起動する
$ npm run dev

以下のようにコンソールにに表示されることを確認する。

サーバーが起動しているはずなので、ブラウザを立ち上げてhttp://localhost:3000/ にアクセスしてみる。
アクセスした際に以下の画面が表示されていれば正常にサーバー起動できている。

次回からはこのプロジェクトを使い色々勉強していこうと思う。