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>

いくつか質問(名前、Nuxt オプション、UI フレームワーク、TypeScript、linter、テストフレームワークなど)に答えると選択した全ての依存関係がインストールされます。次のステップはプロジェクトフォルダに遷移し起動します:

$ cd <project-name>
$ 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

StoryblokMoovweb Support Us