インストール

Nuxt.js はとても簡単に始められます。シンプルなプロジェクトでは必要な依存パッケージは nuxt だけです。

create-nuxt-app を使用する

素早くスタートできるようにするため、Nuxt.js チームは足場ツール create-nuxt-app を作成しました。

npx がインストールされていることを確認してください。(npx は NPM 5.2.0 からデフォルトでバンドルされています)

$ npx create-nuxt-app <project-name>

もしくは yarn を使ってください:

$ yarn create nuxt-app <project-name>

いくつか質問されます:

  1. サーバーサイドのフレームワークを選択します:
  2. 好きな UI フレームワークを選択します:
  3. 好きなテスティングフレームワークを選択します:
    • None (後からでも追加できます)
    • Jest
    • AVA
  4. Nuxt のモードを選択します。(Universal または SPA)
  5. HTTP リクエストを簡単に行うために axios module を追加します。
  6. 保存時にコードをチェックするために EsLint を追加します。
  7. 保存時にコードを整形するために Prettier を追加します。

回答が終わり次第、全ての依存関係がインストールされ、プロジェクトを開始する次のステップへ進めます:

$ npm run dev

するとアプリケーションは http://localhost:3000 で動いています。

Nuxt.js は pages ディレクトリ内のファイルの更新を監視します。そのため、新しいページを追加したときにアプリケーションを再起動する必要はありません。

プロジェクトのディレクトリ構造についてより深く理解するには ディレクトリ構造のドキュメント を参照してください。

スクラッチから始める

Nuxt.js プロジェクトをスクラッチから作ることも簡単で、必要なのは 1つのファイルと 1つのディレクトリ だけです。まずは空のディレクトリを作りましょう:

$ mkdir <project-name>
$ cd <project-name>

情報: <project-name> の箇所はプロジェクト名に置き換えてください。

package.json

それぞれのプロジェクトには、 nuxt を起動するために package.json ファイルが必要です。下記の json を package.json にコピーをして、 npm install を実行する前に保存してください:

{
  "name": "my-app",
  "scripts": {
    "dev": "nuxt"
  }
}

上のように書いておけば npm run dev で Nuxt.js を起動できます。

nuxt のインストール

package.json を作成したら nuxt を npm でプロジェクトに追加しましょう:

$ npm install --save nuxt

pages ディレクトリ

Nuxt.js は pages ディレクトリ内の *.vue ファイルについて、各ファイルがアプリケーションのひとつのルートに対応するものとして変換します。

pages ディレクトリを作ります:

$ mkdir pages

それから最初のページを pages/index.vue に作ります:

<template>
  <h1>Hello world!</h1>
</template>

そして、プロジェクトを起動します:

$ npm run dev

すると、アプリケーションは http://localhost:3000 で動いています。

Nuxt.js は pages ディレクトリ内のファイルの更新を監視します。そのため新しいページを追加した場合にアプリケーションを再起動する必要はありません。

プロジェクトのディレクトリ構造についてより深く理解するには ディレクトリ構造のドキュメント を参照してください。

Platinum Sponsors

Storyblok
Support Us