Want to take a look at our new docs? Our new docs are now in beta. Have fun!

インストール

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. サーバーサイドのフレームワークを選択します:
  1. 好きな UI フレームワークを選択します:
  1. 好きなテスティングフレームワークを選択します:
  • None (後からでも追加できます)
  • Jest
  • AVA
  1. Nuxt のモードを選択します。(Universal または SPA)
  2. HTTP リクエストを簡単に行うために axios module を追加します。
  3. 保存時にコードをチェックするために EsLint を追加します。
  4. 保存時にコードを整形するために 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 ディレクトリ内のファイルの更新を監視します。そのため新しいページを追加した場合にアプリケーションを再起動する必要はありません。

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

Contribution for this page is now closed. If you would like to contribute please check out our new docs are now in beta. Have fun!

Platinum Sponsors

Storyblok Support Us