====== nuxt_vuex_codesandboxメモ ======
2019年2月時点、CodeSandboxのNuxt.js上で、Vuetify+Vuexをtryしようとしましたが、私の技術ではどうしても
『NuxtServerError Server resources are not available!』
になってしまってうまくいきませんでした。
断片的で意味のない記録になりますが、残しておきます。
----------------
===== 19.Nuxt.jsで画像一覧アプリ =====
今回は、Vue.jsのフレームワークNuxt.jsを用いて、画像一覧アプリを作成したいと思います。
サーバー側は、あらかじめ用意されているものを用います。
以下のサイトを写経してみたいと思います。
https://luftgarden.work/tut-nuxt-dog-part1/
{{:14.nuxt.jsで画像一覧アプリ:pasted:20190113-182442.png}}
===== 方針をたてる =====
-サーバーサイドは、https://dog.ceo/dog-api/ を利用します
-サーバーから犬の種類のリストを取得して表示
-特定の犬種をクリックすると、その犬種の画像のリストを取得して表示
-画像をクリックするとモーダルウィンドウで拡大表示
-いいねボタン（クリックでカウントアップ）を表示
https://dog.ceo/dog-api/
{{:14.nuxt.jsで画像一覧アプリ:pasted:20190113-182748.png}}
今回は、以下のコードを参考にさせていただきました。
https://luftgarden.work/tut-nuxt-dog-part1/
ソースコード
https://codesandbox.io/s/y00qv4x7n9
作成中
できたもの
デモサイト
===== 0.用意するもの（開発環境） =====
パソコン
Chrome（くろーむ、WEBブラウザの一つ）
GitHubアカウント作成済み（無料）
Googleアカウント作成済み（無料）
パソコンは、Windowsパソコンでも、Macでも、かまいませんが、私の場合はWindows 10 Proとなります。
今回利用するもの
CodeSandbox
Vue 2.5.2
Nuxt.js
Vuetify
https://dog.ceo/dog-api/
===== Codesandboxで新規Nuxt.jsアプリの作成 =====
*[[https://codesandbox.io/|CodeSandbox]]でNuxt.jsアプリを新規作成
{{:14.nuxt.jsで画像一覧アプリ:pasted:20190113-190712.png}}
{{:14.nuxt.jsで画像一覧アプリ:pasted:20190113-190824.png}}
*Nuxt.jsも2クリックで開発環境が整いました。
{{:14.nuxt.jsで画像一覧アプリ:pasted:20190113-190920.png}}
===== CodesandboxのNuxt.jsアプリに@nuxtjs/vuetifyを導入 =====
Vue.jsでvuetifyを利用するためには、vuetifyをインストールしましたが、Nuxt.jsでvuetifyを利用するためには、@nuxtjs/vuetifyをインストールし、さらに、nuxt.config.jsファイルのmodulesに、@nuxtjs/vuetifyを追加します。
*画面左側を、下方向へ行きます
{{:14.nuxt.jsで画像一覧アプリ:pasted:20190113-191234.png}}
*Add Dependency をクリック
{{:14.nuxt.jsで画像一覧アプリ:pasted:20190113-191307.png}}
*nuxtjs/vuetifyと入力して、一覧に表示される@nuxtjs/vuetify(vuetifyではないことに注意)をクリックしてインストール
{{:14.nuxt.jsで画像一覧アプリ:pasted:20190113-212600.png}}
*だいぶ時間がかかります。（ときどき、Bad Gatewayと表示されて、先に進めなくなることもあります。そんなときは、Create Sandboxからやり直したりしますが、どのような条件でBad Gatewayになるのか私にはわかりません。。。）
{{:14.nuxt.jsで画像一覧アプリ:pasted:20190113-212838.png}}
*nuxt.config.jsファイルのmodulesに、@nuxtjs/vuetifyを追加します。
(変更前)
{{:14.nuxt.jsで画像一覧アプリ:pasted:20190113-213005.png}}
(変更後)
{{:14.nuxt.jsで画像一覧アプリ:pasted:20190113-213135.png}}
*layouts/default.vueの変更
(変更前)
{{:14.nuxt.jsで画像一覧アプリ:pasted:20190113-223723.png}}
(変更後)
{{:14.nuxt.jsで画像一覧アプリ:pasted:20190113-224037.png}}
参考：https://qiita.com/munieru_jp/items/882727bb493c8502aea1
@munieru_jp
2018年12月01日に更新
Nuxt.jsのプロジェクトにVuetify.jsを導入する方法
===== pages/index.vueとlayouts/default.vueの編集 =====
layouts/default.vueのの中身を、pages/index.vueへ移動します。
pages/index.vue
(変更後)
{{:14.nuxt.jsで画像一覧アプリ:pasted:20190113-230141.png}}
layouts/default.vue
(変更後)
{{:14.nuxt.jsで画像一覧アプリ:pasted:20190113-230303.png}}
===== 犬種リストをDog APIで取得する =====
以下の3つの流れで実装します。（引用元：https://luftgarden.work/tut-nuxt-dog-part1/）
-Dog API用のクラスを作成
-ページからAPIのエンドポイントを叩く
-取得した犬種リストをストアに保存
==== Dog API用のクラスを作成 ====
*apiフォルダを作成
{{:14.nuxt.jsで画像一覧アプリ:pasted:20190113-230845.png}}
*api/dog.js ファイルを作成
{{:14.nuxt.jsで画像一覧アプリ:pasted:20190113-231018.png}}
*[[https://luftgarden.work/tut-nuxt-dog-part1/|こちらのサイト]]のapi/dog.js をコピペする
{{:14.nuxt.jsで画像一覧アプリ:pasted:20190113-231555.png}}
==== 犬種リストを保存するストアを作成 ====
*store/ フォルダ内にindex.js を作成し、これまた、[[https://luftgarden.work/tut-nuxt-dog-part1/|こちらのサイト]]のstore/index.js をコピペします
{{:14.nuxt.jsで画像一覧アプリ:pasted:20190113-232206.png}}
*ページ側で fetch() メソッドを定義し、ストアにデータコミット...と、[[https://luftgarden.work/tut-nuxt-dog-part1/|こちらのサイト]]に記載してあるのですが、個人的にはVuex、まだ全然わかりません。とりあえずpages/index.vueを写経して次に進みます。
{{:14.nuxt.jsで画像一覧アプリ:pasted:20190113-232759.png}}
==== 画面上に犬種リストを表示する ====
「Vuexの mapStateヘルパーを使うことで、ストアからデータを取り出す」らしいのですが、これまたさっぱり、、、とりあえず、とにかく、[[https://luftgarden.work/tut-nuxt-dog-part1/|こちらのサイト]]のpages/index.vueを写経します。
pages/index.vue
{{:14.nuxt.jsで画像一覧アプリ:pasted:20190114-000728.png}}
TypeError
Cannot read property 'commit' of undefined と出てしまい、先に進めず。。。
途中
===== Nuxt.jsに関するリンク =====
https://speakerdeck.com/mahm/vue-dot-jsdezuo-rusingurupeziapurikesiyon-vue-dot-js-nuxt-dot-js-vuetify
{{:14.nuxt.jsで画像一覧アプリ:pasted:20190113-214433.png}}
https://qiita.com/nunulk/items/0d50ac8cf7e16287f915
@nunulk
2018年03月25日に更新
はじめての Nuxt.js + Vuex + axios
https://poridiet.com/nuxtaxiosvuex/
Nuxt.jsでaxiosとvuexを使ってみる
2018年11月27日
https://tech.libinc.co.jp/entry/2018/11/15/143000
2018-11-15
真のフロントエンドエンジニアになるために、まずはNuxt.js + Firebaseを使って簡易メモ帳を作ってみた
→非常に説明が丁寧です。かっこよくて使いやすいMarkdownエディタを作成することができます。Nuxt.jsとElemext-UI、Firebaseを用いています。後で写経してみたいです。（唯一の難点は、CSSが何百行もあるので、私には真似ができないです、、、）
https://tech.libinc.co.jp/entry/2018/12/10/181913
2018-12-10
入社2か月間で駆け出しエンジニアがつまずいた15のポイント
→非常に参考になります。
https://qiita.com/_takeshi_24/items/3ee051e1db1b3e8da106
@_takeshi_24
2018年10月28日に更新
Nuxt v2とFirebase(CloudFirestore)でPWA対応Webアプリ開発
https://inside.dmm.com/entry/2018/11/06/nuxt2-pwa-gae-se
2018-11-06
Nuxt.js v2とGAE/SE Node.jsでSPA×SSR×PWA×サーバーレスを実現する
https://codesandbox.io/s/github/manniL/nuxt-decouple-and-organize-api-calls/tree/master/?from-embed
https://webxreal.com/js_nuxt-axios-asyncdata/
Vue.js/Nuxt.jsでHTTP非同期通信axios/asyncDataを使ってみる
2018/9/23
https://rara-world.com/nuxt-js-tutorial-vue/
https://blog.uryo.net/%E6%97%A5%E5%B8%B8/cjo4dza6a000k45k3c74bywuv/
Vue.js + Nuxt.js + Vuetify + PWA + Firebaseで家計簿アプリを作ってみた
2018-10-24
===== Vuexに関するリンク =====
https://qiita.com/terraphic/items/078dfbadcd75ad336ed4
@terraphic
2018年08月15日に投稿
Vuexで状態管理の大事さを知る
https://qiita.com/MasahiroHarada/items/2597bd6973a45f92e1e8
@MasahiroHarada
2019年01月14日に更新
Vue + Vue Router + Vuex + Laravel チュートリアル（全16回）を書きました。
→これを写経してみたい！
===== ソースコード =====
作成中
===== リンク =====
目次：[[:index.html|このサイトについて]]
前：
次：