Nuxt.js入門①プロジェクトを作成しよう!

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を使用していきます。

ここまでの質問に解凍し終えるとインストールが実行されます。

次の記事で作成されたディレクトリを解説していきます!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です