翻訳されたページ このページのコンテンツは古い可能性があります。

インストール

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


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

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

CodeSandbox で試す StackBlitz で試す

前提条件

create-nuxt-app の使用

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

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

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

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

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

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

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

Nuxt で始めるための他の方法は、CodeSandbox を使うことです。これは、Nuxt を使って素早く試したり、自分のコードを他の人と共有したりするのに最適な方法です。

手動インストール

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

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

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

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

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> または yarn <command> で起動される Nuxt コマンドを定義します。

package.json ファイルとは何ですか?

package.json はプロジェクトにおける ID カードのようなものです。もし package.json ファイルがどんなものか知らない場合は npm ドキュメント を一読してください。

Nuxt のインストール

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

Yarn
yarn add nuxt
NPM
npm install nuxt

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

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

最初のページを作成

Nuxt は 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
yarn dev
NPM
npm run dev
アプリケーションを開発モードで起動する場合は、dev コマンドを使用します。

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

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

Nuxt を開発モードで起動すると、ほとんどのディレクトリでファイルの変更を監視しているので、新しいページを追加する際などにアプリケーションを再起動する必要はありません。
dev コマンドを実行すると、.nuxt フォルダが作成されます。このフォルダはバージョン管理の ignore 対象にしてください。ルートレベルで .gitignore ファイルを作成し、.nuxt を追加することで .nuxt フォルダ内にあるファイルを無視することができます。

ボーナスステップ

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

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

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

more-fun という名前のディレクトリを作成し、その中に index.vue ファイルを入れます。これは、more-fun.vue ファイルを作成したのと同じ結果が得られます。
このページをGitHubで編集する 更新日 Fri, Oct 22, 2021