インストール

前提条件

  • node - v10.13 以上 最新の LTS バージョンのインストールをおすすめします。
  • テキストエディタは Vetur 拡張機能をインストールした VSCodeWebStorm をおすすめします。
  • ターミナルは VSCode の統合ターミナルまたは Webstorm ターミナルを使うことをおすすめします。

create-nuxt-app を使う

すぐ始めるには、create-nuxt-app を使うことができます。

npx(npx は NPM 5.2.0 以降だとデフォルトで同梱されています)か、v6.1 の npm か yarn がインストールされていることを確認してください。

yarn create nuxt-app <project-name>
npx create-nuxt-app <project-name>
npm init nuxt-app <project-name>

いくつかの質問(名前、Nuxt オプション、UI フレームワーク、TypeScript、linter、テストフレームワークなど)されます。すべてのオプションをみるには Create Nuxt app を参照してください。

一度すべての質問に答えると、すべての依存関係をインストールします。次のステップは、プロジェクトフォルダに移動して起動します:

cd <project-name>
yarn dev
cd <project-name>
npm run dev

アプリケーションは http://localhost:3000 で実行されています。おつかれさまでした!

Nuxt.js を始める別の方法は CodeSandbox を使うことです。CodeSandbox は Nuxt.js を素早く試したり、自分のコードを他の人にシェアしたりするのに最適な方法です。

スクラッチで始める

1 つのファイルと 1 つのディレクトリを用意するだけで Nuxt.js プロジェクトをスクラッチで作れます。

今回の例では、ターミナルを使ってディレクトリとファイルを作成しますが、お好みのエディタで作成して構いません。

プロジェクトのセットアップ

始めるにはプロジェクトの名前をつけた空のディレクトリを作成し、作成したディレクトリに移動します:

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

<project-name> はご自身のプロジェクト名に置き換えてください。

そして、package.json という名前のファイルを作成します:

touch package.json

package.json ファイルをお好みのエディタで開き、以下の JSON の内容を入力します:

package.json
{
  "name": "my-app",
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "generate": "nuxt generate",
    "start": "nuxt start"
  }
}

scriptsnpm run <command> コマンドで起動される Nuxt.js コマンドを定義します。

package.json ファイルとは?

package.json はプロジェクトにおける ID カードのようなものです。もし package.json ファイルがどんなものかご存知ない場合は NPM のドキュメントを一読することをおすすめします。

nuxt のインストール

package.json を作成後、以下のように npm または yarn 経由で nuxt を追加します:

yarn add nuxt
npm install nuxt

このコマンドは nuxt を依存関係としてプロジェクトに追加します。package.json にも自動的に追加します。また、node_modules ディレクトリが作成され、インストールしたパッケージと依存関係が保存されます。

yarn.lock または package-lock.json も作成され、プロジェクトにインストールされたパッケージの一貫したインストールと互換性のある依存関係を保証します。

最初のページを作成

Nuxt.js は pages ディレクトリ内にある全ての *.vue ファイルをアプリケーションのルートとして変換します。

プロジェクトに pages ディレクトリを作成します:

mkdir pages

そして、pages ディレクトリ内に index.vue ファイルを作成します:

touch pages/index.vue

このページを index.vue と名づけることが重要です。これはアプリケーションが開いた際に Nuxt がデフォルトで表示するページになります。これがホームページであり、index と名づけなればなりません。

index.vue ファイルをエディタで開き、次の内容を追加します:

pages/index.vue
<template>
  <h1>Hello world!</h1>
</template>

プロジェクトの開始

ターミナルで以下のコマンドのどちらかを入力してプロジェクトを実行します:

yarn dev
npm run dev

アプリケーションを開発モードで起動する場合は、dev コマンドを使用します。

今、アプリケーションは http://localhost:3000 で実行されています。

ターミナルのリンクをクリックしてブラウザを開くと、前のステップでコピーした「Hello World」のテキストが表示されます。

Nuxt.js を開発モードで起動すると、ほとんどのディレクトリでファイルの変更をリッスンするので、新しいページを追加する際などにアプリケーションを再起動する必要はありません。

dev コマンドを実行すると、.nuxt フォルダが作成されます。このフォルダはバージョン管理の ignore 対象にしてください。ルートレベルで .gitignore ファイルを作成し、.nuxt を追加することで .nuxt フォルダ内にあるファイルを無視することができます。

ボーナスステップ

pages ディレクトリに fun.vue という名前のページを作成しましょう。

<template></template> を追加し、タグ内におもしろい文章を入れた見出しを入れます。

そして、ブラウザで新しいページ http://localhost:3000/fun にアクセスします。

more-fun という名前のディレクトリを作成し、その中に index.vue ファイルを入れます。これで、more-fun.vue ファイルを作成したのと同じ結果が得られます。

Contributors

間違いを見つけた、またはドキュメントに貢献したいですか? GitHub でこのページを編集する