インストール
ここでは、4 つのステップで、Nuxt プロジェクトを立ち上げで実行する方法について説明します。
オンラインプレイグランド
CodeSandbox や StackBlitz で直接 Nuxt をオンラインで試すことができます:
CodeSandbox で試す StackBlitz で試す前提条件
- 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
ディレクトリが作成され、インストールしたパッケージと依存関係が保存されます。
yarn.lock
または package-lock.json
も作成され、プロジェクトにインストールされたパッケージの一貫したインストールと互換性のある依存関係を保証します。最初のページを作成
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 にアクセスします。
more-fun
という名前のディレクトリを作成し、その中に index.vue
ファイルを入れます。これは、more-fun.vue
ファイルを作成したのと同じ結果が得られます。