create-nuxt-appでプロジェクトを作成しよう！
まずはnpxコマンドを使ってNuxt.jsのプロジェクトを作成しましょう。
$ npx create-nuxt-app <プロジェクトの名前>
コマンド入力後にダウンロードが開始されその後、いくつかの質問をされますのでその質問の内容を解説させていただきます。今回はプロジェクト名にPlloggと入力します。
? Project name (Pllogg)
ここではプロジェクトの名前を聞かれています。基本的に何もせずにそのままEnterを押していただければ大丈夫です。その場合括弧の中の文字がプロジェクトの名前として登録されます。括弧の中の文字列は npx create-nuxt-app で入力した文字列となります。
? Project description (My exquisite Nuxt.js project)
ここではプロジェクトのディスクリプション（説明）を入力します。この質問に関してもそのままEnterを押していただいて構いません。
? Use a custom server framework (Use arrow keys) ❯ none express koa adonis hapi feathers micro
ここではどのサーバーサイドのフレームワークを使用するのか質問されています。(Use arrow keys)とあるようにキーボードの十字キーを使用して選択しEnterを押します。noneを選択するとNuxt.jsのデフォルトサーバーを使用できます。今回はNuxt.jsのデフォルトのサーバーを使用していきます。
? Use a custom UI framework (Use arrow keys) ❯ none bootstrap vuetify bulma tailwind element-ui buefy
ここではどのCSSフレームワークを使用するのかを質問されています。こちらもキーボードの十字キーを使用して選択しEnterを押します。
今回はみなさんが一番馴染みがあるであろうbootstrapを使用していきます。上記に使用したいフレームワークがない場合noneを選択して後から使用したいフレームワークを追加します。
? Choose rendering mode (Use arrow keys) ❯ Universal Single Page App
この質問はサイトを複数ページで構成された通常のサイト(Universal)かシングルページアプリケーション(Single Page App | SPA) として開発するのかを問われています。
今回はタイトル通りSPAを作成するのでSingle Page App を選択します。
? Use axios module (Use arrow keys) ❯ no yes
ここではaxiosモジュールを使用するのかと問われています。axiosモジュールとはHTTP通信を簡単に行うためのライブラリです。今回はwp rest api から情報を取得してサイトに描画する必要があるのでyesとしてインストールしておきます。
? Use eslint (Use arrow keys) ❯ no yes
ここではeslintを使用するのかを問われています。eslintとはjavascriptのコードを実行する前にバグを発見して知らせてくれたり、括弧やスペース、インデントなどのスタイルを統一したり後から編集しやすく見やすいコードの作成を手助けしてくれます。
今回は勉強のためにもインストールしておきます。
? Use prettier (Use arrow keys) ❯ no yes
prettierとはJavaScriptのコードを綺麗に整形してくれるフォーマッタです。今回使用するかはわかりませんが念のためにインストールしておきます。
? Author name ()
この質問もそのままEnterで構いません。
? Choose a package manager (Use arrow keys) ❯ npm yarn
npmかyarnどちらのパッケージマネージャーを使用するのかを聞かれています、基本的に仕事内容としてはどちらも同じなのでご自身のお好きな方で構いません。今回はyarnを使用していきます。
ここまでの質問に解凍し終えるとインストールが実行されます。
次の記事で作成されたディレクトリを解説していきます！
コメントを残す