はじめに
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というファイルを作成します。
<template>
<div>
ここはAboutページです。
</div>
</template>
保存して、http://localhost:3000/about にアクセスするとAboutページが表示されます。めっちゃ簡単。
ナビゲーションバーを追加してみる
ナビゲーションバーを作ってページ遷移を楽にしたいと思います。
全ページ共通で表示させたいので、sample/components/にNavBar.vueというファイルを作ります。
/sample/.nuxt/router.jsのroutesという配列にそれぞれのページのpathが記載されているのでそれを参考に以下のように書きます。
<template>
<div>
<nuxt-link to="/">Top</nuxt-link>
<nuxt-link to="/about">About</nuxt-link>
</div>
</template>
ページレイアウトは/sample/layouts/default.vueで指定できます。
<template>
<div>
<NavBar /> <!-- 追加 -->
<Nuxt />
</div>
</template>
これでTopにもAboutにもナビゲーションバーができると思います。
ちなみにdefault.vueの<Nuxt />を消すとナビゲーションバー以外何も表示されなくなってしまいます。
ボタンを押したら文字が消えたり現れたりする機能
機能というほどのものではありませんが、、
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>