vue:nuxt.jsとbulmaでハンバーガーメニュー
差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン前のリビジョン次のリビジョン | 前のリビジョン | ||
vue:nuxt.jsとbulmaでハンバーガーメニュー [2018/12/02] – [GitHubに登録] adash333 | vue:nuxt.jsとbulmaでハンバーガーメニュー [2019/01/01] (現在) – [出来上がったサイトとソースコード] adash333 | ||
---|---|---|---|
行 117: | 行 117: | ||
{{: | {{: | ||
+ | |||
+ | ブラウザの横幅(px, | ||
+ | |||
+ | https:// | ||
+ | {{: | ||
+ | |||
+ | Bulmaのtouch deviceとは、横幅が1023px以下とのことだそうです。 | ||
+ | |||
+ | もうちょっと横幅が小さくなってからハンバーガーメニュー出してほしいのですが、やり方は分かりませんでした。 | ||
+ | |||
+ | https:// | ||
+ | {{: | ||
ここまでのソースコード(変更点): | ここまでのソースコード(変更点): | ||
https:// | https:// | ||
+ | ===== ハンバーガーメニューをトグル(クリックするとメニューを表示)するようにする ===== | ||
+ | |||
+ | components/ | ||
+ | |||
+ | <div class=" | ||
+ | |||
+ | <div class=" | ||
+ | |||
+ | これで、ブラウザの横幅が1023px以下のときにハンバーガーメニューが出て、それをクリックすると、メニューが表示されるようになる。 | ||
+ | |||
+ | {{: | ||
+ | |||
+ | {{: | ||
+ | |||
+ | しかし、この時点では、メニューの中のリンク先をクリックしても、トグルされたメニューが開いたままになってしまって閉じてくれない。 | ||
+ | |||
+ | そこで、Vuexという状態管理システムを用いて、リンク先をクリックすると、自動的にトグルが閉じるようにする。 | ||
+ | |||
+ | ここまでのソースコード(変更点):https:// | ||
+ | |||
+ | ===== Vuexストアを設定してトグルONとOFFをstoreに定義 ===== | ||
+ | |||
+ | Vuexシステムを利用するために、store/ | ||
+ | |||
+ | store/ | ||
+ | {{: | ||
+ | |||
+ | storeに、isMenuActive (True or False)の状態を定義しておいて、 | ||
+ | |||
+ | -ハンバーガーメニューをクリックしたらON、OFF | ||
+ | -リンクをクリックしてページ遷移したらOFF | ||
+ | となるようにしておきます。 | ||
+ | |||
+ | components/ | ||
+ | |||
+ | <wrap hi>< | ||
+ | < | ||
+ | //変更前 | ||
+ | @click=" | ||
+ | //変更後 | ||
+ | @click=" | ||
+ | </ | ||
+ | |||
+ | <wrap hi>< | ||
+ | < | ||
+ | //変更前 | ||
+ | : | ||
+ | //変更後 | ||
+ | : | ||
+ | </ | ||
+ | |||
+ | また、Navbar.vueの< | ||
+ | {{: | ||
+ | |||
+ | ===== Vuexについて ===== | ||
+ | 状態管理システムVuexの構造についての絵を、以下に貼り付けておきます。 | ||
+ | |||
+ | https:// | ||
+ | {{: | ||
+ | |||
+ | データの流れが、Vue Components => Actions => Mutations => State => Vue Components というように一方向らしいです。。。 | ||
+ | |||
+ | 大事なことは、< | ||
+ | |||
+ | < | ||
+ | |||
+ | < | ||
+ | < | ||
+ | export default { | ||
+ | fetch ({store}) { | ||
+ | store.commit(' | ||
+ | } | ||
+ | } | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | stateとかstoreとか言葉がたくさん出てきて間違えやすいので、タイプミスに注意です。 | ||
+ | |||
+ | pages/ | ||
+ | |||
+ | 一度、ターミナル画面でCtrl+Cでサーバを停止し、もう一度、npm run devを入力。 | ||
+ | |||
+ | {{: | ||
+ | |||
+ | ちゃんとうまくいった。 | ||
+ | |||
+ | pages/ | ||
+ | {{: | ||
+ | |||
+ | pages/ | ||
+ | {{: | ||
+ | |||
+ | 他のページへ移動しても、ちゃんとハンバーガーメニューは閉じてくれた。 | ||
+ | |||
+ | ここまでのソースコード(変更点):https:// | ||
+ | |||
+ | ===== NuxtサイトをNetlifyにデプロイ ===== | ||
+ | 公式サイトの通りに、NetlifyからGitHub経由でデプロイする。 | ||
+ | |||
+ | https:// | ||
+ | {{: | ||
+ | |||
+ | Netlifyでの画面は以下のようになる。 | ||
+ | {{: | ||
+ | |||
+ | ===== Nuxt.jsに関するリンク ===== | ||
+ | https:// | ||
+ | | ||
+ | Nuxt.js で簡単な画像一覧アプリを作成する – Part.1 | ||
+ | |||
+ | ===== 出来上がったサイトとソースコード ===== | ||
+ | |||
+ | 出来上がったサイト | ||
+ | |||
+ | https:// | ||
+ | |||
+ | {{: | ||
+ | |||
+ | 幅を狭くすると、以下のようにハンバーガーメニューが出て、クリックするとリンク先が表示される。 | ||
+ | |||
+ | {{: | ||
+ | |||
+ | ソースコード | ||
+ | |||
+ | https:// | ||
+ | |||
+ | ===== Vuexについて理解するためのお勧めの本 ===== | ||
+ | |||
+ | Vuex、正直難しいです。昔、私はReduxは挫折しました。しかし、以下の本を最初から読んでいくと、なんとなく、Vuexが少しわかった気にはなれます。 | ||
+ | |||
+ | Vue.jsのコードを理解するためにも、以下の本は非常におすすめです。@vue/ | ||
+ | < | ||
+ | <iframe style=" | ||
+ | </ | ||
===== 写経元サイト ===== | ===== 写経元サイト ===== | ||
https:// | https:// |
vue/nuxt.jsとbulmaでハンバーガーメニュー.1543765278.txt.gz · 最終更新: 2018/12/02 by adash333