サルでもわかるWEBプログラミング

フリーソフトのみでホームページ作成

ユーザ用ツール

サイト用ツール

現在位置: index.html » 19.nuxt.jsで画像一覧アプリ » nuxt_vuex_codesandboxメモ
トレース:
19.nuxt.jsで画像一覧アプリ:nuxt_vuex_codesandboxメモ


差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

次のリビジョン		前のリビジョン
19.nuxt.jsで画像一覧アプリ:nuxt_vuex_codesandboxメモ [2019/02/08] – 作成 adash33319.nuxt.jsで画像一覧アプリ:nuxt_vuex_codesandboxメモ [2019/02/08] (現在) – [19.Nuxt.jsで画像一覧アプリ] adash333
行 3: 行 3:
 『NuxtServerError Server resources are not available!』 『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
 +
 +作成中
 +
 +
 +できたもの
 +
 +デモサイト
 +
 +
 +<html>
 +
 +</html>
 +
 +===== 0.用意するもの（開発環境） =====
 +<code>
 +パソコン
 +Chrome（くろーむ、WEBブラウザの一つ）
 +GitHubアカウント作成済み（無料）
 +Googleアカウント作成済み（無料）
 +</code>
 +
 +パソコンは、Windowsパソコンでも、Macでも、かまいませんが、私の場合はWindows 10 Proとなります。
 +
 +今回利用するもの
 +<code>
 +CodeSandbox
 +
 +Vue 2.5.2
 +Nuxt.js 
 +Vuetify
 +
 +https://dog.ceo/dog-api/
 +</code>
 +
 +===== 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の変更
 +<html>
 +<script src="https://gist.github.com/adash333/75f1f7bc2db7ebd51f6effae0daf81ef.js"></script>
 +</html>
 +(変更前)
 +{{: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の<container></container>の中身を、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|このサイトについて]]
 +
 +前：
 +
 +次：
 +
 +
 +
 +
  
  


19.nuxt.jsで画像一覧アプリ/nuxt_vuex_codesandboxメモ.1549655802.txt.gz · 最終更新: 2019/02/08 by adash333
Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki