Nuxt.jsを使ってみる

Vue.jsのフレームワークのNuxt.jsを使ってみます。

導入

公式のドキュメントをみながら簡単に導入を試してみます。
Nodeのバージョン8.9.0以降が必要になるようなので、注意してください。

nuxtのインストール

プロジェクトフォルダを作成して、ターミナルで移動します。

cd プロジェクトフォルダまでのパス

プロジェクトフォルダにpackage.jsonを作成して、内容を下記のようにします。

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

次にnuxtをインストールします。

npm install nuxt

これでnuxtのインストールまでできました。

開発環境を起動する

pagesディレクトリを作成します。

mkdir pages

pagesディレクトリにindex.vueを作成します。

touch pages/index.vue

index.vueを開いて内容を下記のように変更します。

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

開発環境を立ち上げます。

npm run dev

http://localhost:3000 にアクセスして、「Hello world!」と表示されていればOKです。

pagesディレクトリはアプリケーションのビューとルートを配置するディレクトリで、例えばpagesディレクトリ内にfun.vueというファイル名で作成すると、http://localhost:3000/fun/にページが作成されます。

ビルド

ビルドを行い、静的ファイルを生成してみます。
開発環境を止めて、下記コマンドを実行します。

npm run generate

distディレクトリが生成されました。
distディレクトリを確認したい場合、下記コマンドを実行することでhttp://localhost:3000で確認できます。

npm start

ディレクトリ構成

Nuxt.jsでは、ディレクトリ構成のルールが決まっているので、その中からいくつか確認してみます。

• /pages/ アプリケーションのビューとルートを配置するディレクトリ。
• /components/ コンポーネントファイルを配置するディレクトリ。
• /assets/ Sassファイルや画像、フォントなどのファイルを配置するディレクトリ。
• /static/ robots.txtのように、そのままのファイルを保持する必要があるファイルなどを配置するディレクトリ。
• /layouts/ アプリケーションのレイアウトを配置するディレクトリ。
• /middleware/ アプリケーションのミドルウェアを配置するディレクトリ。

ナビゲーション

サイト内のページ間の移動にはNuxtLinkコンポーネントを使用します。
先ほど作成したpagesディレクトリ内のindex.vueを以下のように書き換えてみます。

<template>
  <div>
    <h1>Hello world!</h1>
    <a href="/fun">リンクタグ</a>
    <NuxtLink to="/fun">NuxtLink</NuxtLink>
  </div>
</template>

「リンクタグ」をクリックするとリロードの発生するページ遷移になりますが、「NuxtLink」をクリックするとリロードの発生しない動的なページ遷移になります。
NuxtLinkはページ内の移動のみ使用できるので、外部サイトへのリンクの場合はaタグを使用する必要があります。

.nuxtフォルダ

devコマンドを実行すると.nuxtフォルダが作成されますが、バージョン管理に含める必要はないので、.gitignoreを作成してフォルダをバージョン管理から除外しておきます。

touch .gitignore

.gitignoreに下記を追加します。

.nuxt/