z_blog:2018:181201_nuxt_bulma_responsive
差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン前のリビジョン次のリビジョン | 前のリビジョン最新のリビジョン両方とも次のリビジョン | ||
z_blog:2018:181201_nuxt_bulma_responsive [2018/12/02] – [リンク] adash333 | z_blog:2018:181201_nuxt_bulma_responsive [2018/12/02] – [NuxtサイトをNetlifyにデプロイ] adash333 | ||
---|---|---|---|
行 222: | 行 222: | ||
components/ | components/ | ||
- | + | <div class=" | |
- | + | ||
- | <div class=" | + | |
< | < | ||
//変更前 | //変更前 | ||
- | : | + | @click=" |
+ | // | ||
+ | @click=" | ||
+ | </code> | ||
+ | <div class=" | ||
+ | < | ||
+ | //変更前 | ||
+ | : | ||
//変更後 | //変更後 | ||
+ | : | ||
+ | </ | ||
+ | |||
+ | |||
+ | |||
+ | Vuexの構造についての絵を、以下に貼り付けておく。 | ||
+ | |||
+ | https:// | ||
+ | {{: | ||
+ | |||
+ | データの流れが、Vue Components => Actions => Mutations => State => Vue Components というように一方向らしい。。。 | ||
+ | |||
+ | < | ||
< | < | ||
+ | < | ||
+ | export default { | ||
+ | fetch ({store}) { | ||
+ | store.commit(' | ||
+ | } | ||
+ | } | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | pages/ | ||
+ | {{: | ||
+ | |||
+ | pages/ | ||
+ | {{: | ||
+ | |||
+ | あれ?store is not defined というNuxt.jsのエラーが出てしまった。 | ||
+ | |||
+ | < | ||
+ | エラーもなかなか見つけにくい。。。(Ionic(Angular)のときは、ChromeでCtrl+Shift+Iでconsole logを見ると、どのファイルの何行目にどのようなエラーがありそうか、けっこう教えてくれる感じであった。) | ||
+ | |||
+ | {{: | ||
+ | |||
+ | pages/ | ||
+ | {{: | ||
+ | |||
+ | まだ行がずれていてかっこ悪いが、これで、なんとか、ハンバーガーメニューが実装できた。 | ||
+ | |||
+ | しかし、ハンバーガーメニューの3本線を「メニュー」という文字にしたり、ボタンにしたりしようとすると、なんだかデザイン的に自分の思うように変更できない。。。 | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | ===== NuxtサイトをNetlifyにデプロイ ===== | ||
+ | |||
+ | 公式サイトに書いてあった。 | ||
+ | |||
+ | https:// | ||
+ | {{: | ||
+ | |||
+ | Netlifyでの画面はこんな感じ。 | ||
+ | |||
+ | {{: | ||
+ | デプロイ後のサイト | ||
+ | https:// | ||
- | ===== リンク | + | ===== ソースコード |
+ | https:// | ||
===== Nuxt.jsでお勧めの本(2018年現在) ===== | ===== Nuxt.jsでお勧めの本(2018年現在) ===== | ||
z_blog/2018/181201_nuxt_bulma_responsive.txt · 最終更新: 2018/12/02 by adash333