プロジェクトをスクラッチで作成する際の最小構成

Nuxt.jsのプロジェクトを簡単に作成することのできるツール「create-nuxt-app」は便利ですが、何も知らない状態で最初から使ってしまうと、Nuxt.jsのイメージが掴みにくいというデメリットがあります。

そういった場合は、スクラッチで最小構成のプロジェクトを作成して徐々に機能を増やしていくと、Nuxt.jsの決まり事や動作が分かりやすく理解しやすいです。

Nuxt.jsを使ったプロジェクトの最小構成は以下の通りです。

project
├ package.json
└ pages
   └ index.vue

以下、それぞれのファイルの詳細になります。

package.jsonには、プロジェクト名（name）と実行コマンド（scripts）を記述します。

{
  "name": "nuxt-sample",
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start"
  }
}

とりあえず動きを確認したいだけであれば、build や start のコマンドは不要です。

プロジェクト直下に pages ディレクトリを作成して、その下に index.vue ファイルを追加します。

index.vue ファイルの中身は以下の通り。

<template>
  <h1>Hello World!</h1>
</template>

pages/index.vue がWebサイトのURLのトップページに該当します。

上記のファイルを用意したら、まず、以下のコマンドでNuxt.jsをインストールします。

npm install --save nuxt

インストール後、dev コマンドでプロジェクトを実行して、

npm run dev

動作確認用のURL（http://localhost:3000/）にアクセスすると、index.vue に記述した「Hello World!」が表示されます。

プロジェクトを作り込んでいくと設定ファイルやらなんやら他にも必要なファイルが出てきますが、動作確認程度であれば、たった2ファイルから始められるので、勉強しようとした時のハードルがかなり低くいです。

今回作成した最小構成のプロジェクトと「create-nuxt-app」で作成したプロジェクトを比較ツールなどを使って差分を確認すると、またイメージがつきやすいと思います。

• インストール - NuxtJS