【Nuxt.js】新しいページを作成してみる

前回Nuxt.jsをOrangePiにインストールしたんでした。
今回はNuxt.jsで新しいページを作成する部分をやってみようと思います。

ページをまとめることがなかなか出来ていないんですが、
方法自体は簡単でした。
自動でページのルーティングを更新してくれるからね…

というか、Ruby on railsもルーティングを自動で更新してくれるから
最近はこっちのが主流なのかな？

１．ルーティングとは？

なんか本来の意味では結構複雑ですね…
wiki:ルーティング

とりあえずはサーバーに特定のアドレスでアクセスされた時、
どのページを開くか？という部分が定義されているということらしい。

前回Nuxt立ち上げてページにアクセスしたけど、その時も
「http://xxx.xxx.xxx.xxx:3000」にアクセスしたときに、
Nuxt立ち上げたディレクトリの「index.vue」を開いて表示するよ
という部分がルーティングとして定義されていて、
その動作によって画面が表示されているらしいんですね。

ほんで、このルーティングが定義されていないと、
他のページを作っても表示できない…らしいんですが、
Nuxt.jsはこの定義を自動で更新してくれます！
なので、作る側としては特に意識する必要はないんですねぇ！

たまげたなあ。

２．画面用のファイルを作ってみる

とりあえず作ってみましょうか。
Nuxt.jsのプロジェクトページの「pages」ディレクトリに
新しく作るページのディレクトリを作成します。
んで、そのページに「index.vue」ファイルを作成します。

Nuxt.jsを動かしながらやってみましょう。

npm run dev

作るページはこんな内容のヤツ。

<template>
  <div class="container">
    <h1>HelloWorld</h1>
  </div>
</template>

ファイルを作成した時にNuxt.jsの方に動きがあると思います。

起動時みたいなビルドが走るのではないでしょうか？

pages直下にある「index.vue」をコピペして先ずファイルを置いた人は、

置いた瞬間に動作したと思います。

で、ページにアクセスしてみましょう。
自分は「pages/sample/index.vue」を作成したので、
「localhost:3000/sample」ですね。

こんな感じのHelloWorldだけ表示される画面に
アクセスできるはずです。

３．Nuxt.jsはルーティングを自動でやってくれる！

今回は簡素ながら、新しいページの作成を行いました。
Nuxt.jsは自動でルーティングを行ってくれるんですね。
便利！

なんかvue-routerという機能らしいですね。

ファイルの更新と同時に行ってくれるのですが、
このタイミングでvueファイルから表示する内容も更新してくれるので、
「ファイル変更→ビルド→確認」と毎回自分でビルドせずに
「変更→確認→変更→確認...」と、変更と確認をノータイムで繰り返せるのは、
開発手順としては結構違いが出てきそうですね。

詳しい知識が置いてけぼりですが、
とりあえず良い機能だということは分かったので、
ヨシ！