Nuxt.jsのインストールとHelloWorldと画面遷移まで

Nuxt.jsのインストールとHelloWorldと画面遷移までをメモ。

$ npm --version
> 6.11.3
=> 5.2以上ならnpxが標準でインストールされているのでOK

以下、仮にプロジェクト名（ディレクトリ名）を「MySample」とする。

$ npx create-nuxt-app MySample
> いくつか質問される。プロジェクト名以外は空白でもOK。

$ cd ./MySample
$ npm install
$ npm run dev

http://localhost:3000でブラウザ確認できる。

次に、HelloWorldページをTOPページから画面遷移できるようにする。

$ mkdir -p ./pages/hello
$ vi ./pages/hello/helloworld.vue
<template>
  <h1>Hello {{ name }}!</h1>
</template>

<script>
export default {
  data: () => {
    return { name: 'World: NuxtJS' }
  }
}
</script>

で、HelloWorldページ
http://localhost:3000/hello/helloworldがブラウザ表示できる。

次に、TOPページから画面遷移させるので、TOPページのコードを編集する。

$ vi ./pages/index.vue
<div class="links">
  <a href="/hello/helloworld" class="button--grey">Hello</a>
</div>

で、TOPページ
http://localhost:3000から画面遷移できるようになる。