19.nuxt.jsで画像一覧アプリ:nuxt_vuex_codesandboxメモ
差分
このページの2つのバージョン間の差分を表示します。
次のリビジョン | 前のリビジョン | ||
19.nuxt.jsで画像一覧アプリ:nuxt_vuex_codesandboxメモ [2019/02/08] – 作成 adash333 | 19.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:// | ||
+ | {{: | ||
+ | |||
+ | ===== 方針をたてる ===== | ||
+ | -サーバーサイドは、https:// | ||
+ | -サーバーから犬の種類のリストを取得して表示 | ||
+ | -特定の犬種をクリックすると、その犬種の画像のリストを取得して表示 | ||
+ | -画像をクリックするとモーダルウィンドウで拡大表示 | ||
+ | -いいねボタン(クリックでカウントアップ)を表示 | ||
+ | |||
+ | https:// | ||
+ | {{: | ||
+ | |||
+ | 今回は、以下のコードを参考にさせていただきました。 | ||
+ | |||
+ | https:// | ||
+ | |||
+ | ソースコード | ||
+ | https:// | ||
+ | |||
+ | 作成中 | ||
+ | |||
+ | |||
+ | できたもの | ||
+ | |||
+ | デモサイト | ||
+ | |||
+ | |||
+ | < | ||
+ | |||
+ | </ | ||
+ | |||
+ | ===== 0.用意するもの(開発環境) ===== | ||
+ | < | ||
+ | パソコン | ||
+ | Chrome(くろーむ、WEBブラウザの一つ) | ||
+ | GitHubアカウント作成済み(無料) | ||
+ | Googleアカウント作成済み(無料) | ||
+ | </ | ||
+ | |||
+ | パソコンは、Windowsパソコンでも、Macでも、かまいませんが、私の場合はWindows 10 Proとなります。 | ||
+ | |||
+ | 今回利用するもの | ||
+ | < | ||
+ | CodeSandbox | ||
+ | |||
+ | Vue 2.5.2 | ||
+ | Nuxt.js | ||
+ | Vuetify | ||
+ | |||
+ | https:// | ||
+ | </ | ||
+ | |||
+ | ===== Codesandboxで新規Nuxt.jsアプリの作成 ===== | ||
+ | |||
+ | *[[https:// | ||
+ | {{: | ||
+ | {{: | ||
+ | *Nuxt.jsも2クリックで開発環境が整いました。 | ||
+ | {{: | ||
+ | |||
+ | ===== CodesandboxのNuxt.jsアプリに@nuxtjs/ | ||
+ | Vue.jsでvuetifyを利用するためには、vuetifyをインストールしましたが、Nuxt.jsでvuetifyを利用するためには、@nuxtjs/ | ||
+ | |||
+ | *画面左側を、下方向へ行きます | ||
+ | {{: | ||
+ | *Add Dependency をクリック | ||
+ | {{: | ||
+ | *nuxtjs/ | ||
+ | {{: | ||
+ | *だいぶ時間がかかります。(ときどき、Bad Gatewayと表示されて、先に進めなくなることもあります。そんなときは、Create Sandboxからやり直したりしますが、どのような条件でBad Gatewayになるのか私にはわかりません。。。) | ||
+ | {{: | ||
+ | *nuxt.config.jsファイルのmodulesに、@nuxtjs/ | ||
+ | (変更前) | ||
+ | {{: | ||
+ | (変更後) | ||
+ | {{: | ||
+ | *layouts/ | ||
+ | < | ||
+ | <script src=" | ||
+ | </ | ||
+ | (変更前) | ||
+ | {{: | ||
+ | (変更後) | ||
+ | {{: | ||
+ | |||
+ | 参考:https:// | ||
+ | @munieru_jp | ||
+ | 2018年12月01日に更新 | ||
+ | Nuxt.jsのプロジェクトにVuetify.jsを導入する方法 | ||
+ | |||
+ | ===== pages/ | ||
+ | |||
+ | layouts/ | ||
+ | |||
+ | pages/ | ||
+ | (変更後) | ||
+ | {{: | ||
+ | |||
+ | layouts/ | ||
+ | (変更後) | ||
+ | {{: | ||
+ | |||
+ | ===== 犬種リストをDog APIで取得する ===== | ||
+ | 以下の3つの流れで実装します。(引用元:https:// | ||
+ | -Dog API用のクラスを作成 | ||
+ | -ページからAPIのエンドポイントを叩く | ||
+ | -取得した犬種リストをストアに保存 | ||
+ | |||
+ | ==== Dog API用のクラスを作成 ==== | ||
+ | *apiフォルダを作成 | ||
+ | {{: | ||
+ | *api/dog.js ファイルを作成 | ||
+ | {{: | ||
+ | *[[https:// | ||
+ | {{: | ||
+ | |||
+ | ==== 犬種リストを保存するストアを作成 ==== | ||
+ | *store/ フォルダ内にindex.js を作成し、これまた、[[https:// | ||
+ | {{: | ||
+ | |||
+ | *ページ側で | ||
+ | {{: | ||
+ | |||
+ | ==== 画面上に犬種リストを表示する ==== | ||
+ | 「Vuexの | ||
+ | |||
+ | pages/ | ||
+ | |||
+ | {{: | ||
+ | |||
+ | TypeError | ||
+ | Cannot read property ' | ||
+ | |||
+ | 途中 | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | ===== Nuxt.jsに関するリンク ===== | ||
+ | |||
+ | https:// | ||
+ | {{: | ||
+ | |||
+ | |||
+ | https:// | ||
+ | @nunulk | ||
+ | 2018年03月25日に更新 | ||
+ | はじめての Nuxt.js + Vuex + axios | ||
+ | |||
+ | https:// | ||
+ | Nuxt.jsでaxiosとvuexを使ってみる | ||
+ | 2018年11月27日 | ||
+ | |||
+ | https:// | ||
+ | |||
+ | 2018-11-15 | ||
+ | 真のフロントエンドエンジニアになるために、まずはNuxt.js + Firebaseを使って簡易メモ帳を作ってみた | ||
+ | →非常に説明が丁寧です。かっこよくて使いやすいMarkdownエディタを作成することができます。Nuxt.jsとElemext-UI、Firebaseを用いています。後で写経してみたいです。(唯一の難点は、CSSが何百行もあるので、私には真似ができないです、、、) | ||
+ | |||
+ | https:// | ||
+ | 2018-12-10 | ||
+ | 入社2か月間で駆け出しエンジニアがつまずいた15のポイント | ||
+ | →非常に参考になります。 | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | https:// | ||
+ | @_takeshi_24 | ||
+ | 2018年10月28日に更新 | ||
+ | Nuxt v2とFirebase(CloudFirestore)でPWA対応Webアプリ開発 | ||
+ | |||
+ | https:// | ||
+ | 2018-11-06 | ||
+ | Nuxt.js v2とGAE/SE Node.jsでSPA×SSR×PWA×サーバーレスを実現する | ||
+ | |||
+ | https:// | ||
+ | |||
+ | |||
+ | |||
+ | https:// | ||
+ | Vue.js/ | ||
+ | 2018/ | ||
+ | |||
+ | https:// | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | https:// | ||
+ | Vue.js + Nuxt.js + Vuetify + PWA + Firebaseで家計簿アプリを作ってみた | ||
+ | 2018-10-24 | ||
+ | |||
+ | ===== Vuexに関するリンク ===== | ||
+ | |||
+ | https:// | ||
+ | @terraphic | ||
+ | 2018年08月15日に投稿 | ||
+ | Vuexで状態管理の大事さを知る | ||
+ | |||
+ | https:// | ||
+ | @MasahiroHarada | ||
+ | 2019年01月14日に更新 | ||
+ | Vue + Vue Router + Vuex + Laravel チュートリアル(全16回)を書きました。 | ||
+ | →これを写経してみたい! | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | ===== ソースコード ===== | ||
+ | 作成中 | ||
+ | |||
+ | ===== リンク ===== | ||
+ | 目次:[[: | ||
+ | |||
+ | 前: | ||
+ | |||
+ | 次: | ||
+ | |||
+ | |||
+ | |||
+ | |||
19.nuxt.jsで画像一覧アプリ/nuxt_vuex_codesandboxメモ.1549655802.txt.gz · 最終更新: 2019/02/08 by adash333