【Nuxt.js入門】プロジェクト作成の方法

今回はNuxt.jsのプロジェクトを作成する一例を書きます。

下記の画像は、VS Codeです。VS Codeは無料で使用できる使いやすい開発支援ソフトですので、お勧めです。

Visual Studio Code 公式サイト

プロジェクトの作成方法

まず始めに任意のフォルダを作成して、その中にNuxt.jsのプロジェクトファイルを作成します。

npx create-nuxt-app プロジェクト名

次の画面でプロジェクト名を聞いてきますので、変更がなければエンターで進めます。

Nuxt.js

JavaScriptを選択している状態で、エンターで進めます。

Nuxt.js

NPM

Npmを使用しているので、Npmを選択してエンターで進めます。

Npmは、Node.jsをインストールした際に、インストールされています。

NpmやYarnは、Node.jsのパッケージマネージャーです。
インストールなどを簡単なコマンドで実行できます。

Node.jsは、サーバーサイドの処理を行うためのJavaScriptです。

Nuxt.js

Bootstrap

CSSを細かく書く手間を省きたい場合は、Bootstrap などを導入します。
入れない場合はNoneを選択した状態で進めてください。
エンターで進めます。

Bootstrap公式サイト

Nuxt.js

Axios

Axiosを使用する場合、Axiosの位置で、スペースを押して決定し、エンターで進めます。

Nuxt.js

ESLint

ESLint を選択している状態でエンターで進めます。

ESLintは、JavaScriptのコードをチェックし、修正コードを提案してくれます。

ESLint 公式サイト

Nuxt.js

コードの動作テストをしないので、Noneのままエンターで進めます。
動作テストを行う場合は、Jest を入れます。

Nuxt.js

ユニバーサルモードのまま、エンターで進めます。

Nuxt.js

Server で Node.js が選択されている状態で、エンターで進めます。

Nuxt.js

VSCodeにGitHubを登録した事がある場合は、GitHubのユーザー名が表示されます。
エンターで進めます。

Nuxt.js

jsconfig.jsonが選択されている状態で、エンターで進めます。

jsconfig.json について

Nuxt.js

今回はGitが選択されている状態でエンターで進めます。

Nuxt.js

プロジェクトの作成が完了すると、次のように表示されます。
プロジェクト名は任意です。今回はfile-writing という名前にしています。
Nuxt.js

cdコマンドで、プロジェクトファイルの中へ移動します。

cd file-writing

次のコマンド実行します。

npm run dev

次のような表示となります。ブラウザのアドレスバーに http://localhost:3000/ を入力してエンターします。

Nuxt.js

ブラウザ上では次のように表示されます。

Nuxt.js

まとめ

今回は、Nuxt.jsのプロジェクト作成方法の一例を書きました。
最後までお読みいただきありがとうございました。

 

返信を残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください