インストール

ここでは、4 つのステップで、Nuxt プロジェクトを立ち上げで実行する方法について説明します。

オンラインプレイグランド

CodeSandbox や StackBlitz で直接 Nuxt をオンラインで試すことができます：

前提条件

• Node.js - 最新の LTS バージョンのインストールを推奨します。
• テキストエディタ、VS Code と Vetur 拡張、または WebStorm を推奨します。
• ターミナル、 VS Code に 統合されたターミナル または WebStorm ターミナル を推奨します。

create-nuxt-app の使用

素早く始めるために、create-nuxt-app を使用できます。

yarn か npx のインストール (npx は npm 5.2 からデフォルト提供されています)、または npm v6.1 以上がインストールされていることを確認してください。

yarn create nuxt-app <project-name>

npx create-nuxt-app <project-name>

npm init nuxt-app <project-name>

始めると、いくつかの質問が表示されます (名前、Nuxt オプション、UI フレームワーク、TypeScript、リンター、テストフレームワーク、その他)。すべてのオプションについては、create-nuxt-app documentation を確認してください。

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

cd <project-name>
yarn dev

cd <project-name>
npm run dev

アプリケーションは、今 http://localhost:3000 で動作しています。おつかれさまでした！

手動インストール

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

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

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

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

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

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

package.json を作成します:

touch package.json

package.jsonをエディタで開き、以下の JSON の内容を入力します:

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

scripts に npm run <command> または yarn <command> で起動される Nuxt コマンドを定義します。

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 ディレクトリが作成され、インストールしたパッケージと依存関係が保存されます。

最初のページを作成

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

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

mkdir pages

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

touch pages/index.vue

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

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

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

プロジェクトの開始

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

yarn dev

npm run dev

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

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

ボーナスステップ

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

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

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