情弱によるNuxt.jsの内容浅めな覚書

はじめに

Nuxt.jsで試したことをまとめただけです。
お世辞にも解説とは言えませんのでご了承ください。m(_ _)m

環境

Mac OS X Mojave 10.14.6
Node.jsはすでにインストールしてある前提で進みます。

環境構築はこちらの動画で教えてもらいました。オススメです。
https://www.youtube.com/watch?v=7RMkGMCqYgM&list=PLh6V6_7fbbo8koq2fzoz8lN4gqtPC3Yg4

公式もかなり読みやすいです。
https://ja.nuxtjs.org/

一番お世話になったのがこちらです。色々な例があるので掴みやすいと思います。
https://reffect.co.jp/vue/nuxt-js-first-step

エディタはVisual Studio Codeを使っています。

スタート

プロジェクトの作成

$ npx create-nuxt-app <プロジェクト名>

今回は<プロジェクト名>をsampleにします。
いくつか質問されると思うので、公式に従ってください。
基本デフォルトでOKなのかと思います。
https://ja.nuxtjs.org/guide/installation
プロジェクトが作成されるとsampleというディレクトリができています。
sampleディレクトリに移動しましょう。

$ ls 
sample
$ cd sample

プロジェクトは作成した瞬間からローカルできちんと動きます。

$ npm run dev

上のコマンドを実行して、http://localhost:3000 にアクセスするとNuxtのロゴがどーんとなっているトップページが出てくると思います。
以下の作業はnpm run devを走らせたまま行います。
Nuxtが常に変更を追ってくれているのでとても便利です。

新しいページを追加してみる

sample/pages/にabout.vueというファイルを作成します。

/sample/pages/about.vue

<template>
  <div>
    ここはAboutページです。
  </div>
</template>

保存して、http://localhost:3000/about にアクセスするとAboutページが表示されます。めっちゃ簡単。

ナビゲーションバーを追加してみる

ナビゲーションバーを作ってページ遷移を楽にしたいと思います。
全ページ共通で表示させたいので、sample/components/にNavBar.vueというファイルを作ります。
/sample/.nuxt/router.jsのroutesという配列にそれぞれのページのpathが記載されているのでそれを参考に以下のように書きます。

/sample/components/NavBar.vue

<template>
  <div>
    <nuxt-link to="/">Top</nuxt-link>
    <nuxt-link to="/about">About</nuxt-link>
  </div>
</template>

ページレイアウトは/sample/layouts/default.vueで指定できます。

/sample/layouts/default.vue

<template>
  <div>
    <NavBar />  <!-- 追加 -->
    <Nuxt />
  </div>
</template>

これでTopにもAboutにもナビゲーションバーができると思います。
ちなみにdefault.vueの<Nuxt />を消すとナビゲーションバー以外何も表示されなくなってしまいます。

ボタンを押したら文字が消えたり現れたりする機能

機能というほどのものではありませんが、、
sample/pages/にbutton.vueというファイルを作成します。

/sample/pages/button.vue

<template>
  <div>
    <p><button @click="appearOrDisappear">{{ buttonText }}</button></p>
    <p v-if="visible">見えています</p>
  </div>
</template>

<script>
export default {
  asyncData () {
    return {
      visible: true,
      buttonText: "メッセージを消す"
    }
  },
  methods: {
    appearOrDisappear () {
      const confirmMessage = this.visible ? "メッセージを消しますか？" : "メッセージを出しますか？";
      if (confirm(confirmMessage)) {
        this.visible = this.visible ? false : true;
        this.buttonText = this.visible ? "メッセージを消す" : "メッセージを出す";
      }
    }
  }
}
</script>