18.nuxt.jsとbulmaでハンバーガーメニュー:index.html
差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン前のリビジョン次のリビジョン | 前のリビジョン | ||
18.nuxt.jsとbulmaでハンバーガーメニュー:index.html [2019/02/08] – [新規Nuxt.jsアプリの作成] adash333 | 18.nuxt.jsとbulmaでハンバーガーメニュー:index.html [2019/02/09] (現在) – [初めてのVuex目次] adash333 | ||
---|---|---|---|
行 15: | 行 15: | ||
[[18.nuxt.jsとbulmaでハンバーガーメニュー: | [[18.nuxt.jsとbulmaでハンバーガーメニュー: | ||
+ | |||
+ | [[19.nuxt.jsで画像一覧アプリ: | ||
+ | |||
+ | |||
===== すること ===== | ===== すること ===== | ||
行 22: | 行 26: | ||
ソースコード | ソースコード | ||
+ | https:// | ||
- | + | スクリーンショット | |
- | + | {{: | |
- | Demo | + | |
===== 開発環境 ===== | ===== 開発環境 ===== | ||
行 70: | 行 74: | ||
===== インデックスページ以外のページ(about.vueとcontact.vue)を作成 ===== | ===== インデックスページ以外のページ(about.vueとcontact.vue)を作成 ===== | ||
- | pages/ | + | pages/ |
- | <html> | + | pages/ |
- | <script src="https://gist.github.com/adash333/f34ebffc087acc6a150efee453667ff7.js" | + | <code> |
- | </html> | + | <template> |
+ | <section class="hero is-primary is-bold"> | ||
+ | <div class=" | ||
+ | <h1 class=" | ||
+ | <h2 class=" | ||
+ | </div> | ||
+ | </section> | ||
+ | </template> | ||
+ | </code> | ||
+ | {{: | ||
- | 参考:https: | + | pages/contact.vue |
+ | < | ||
+ | < | ||
+ | <section class=" | ||
+ | <div class=" | ||
+ | <h1 class=" | ||
+ | <h2 class=" | ||
+ | </div> | ||
+ | </section> | ||
+ | </ | ||
+ | </ | ||
+ | {{: | ||
- | {{: | ||
- | {{: | + | ===== ナビゲーションバーのコンポーネントを作成する ===== |
+ | components/ | ||
+ | < | ||
+ | < | ||
+ | <nav class=" | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | </ | ||
+ | </ | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
- | あれ、、、うまくいかない。今日はここまで。。。 | + | このNavbar.vueを、layouts/ |
- | https://www.npmjs.com/ | + | layouts/default.vue |
- | こちらを使うのがよいのか? | + | (変更前) |
+ | {{:18.nuxt.jsとbulmaでハンバーガーメニュー: | ||
+ | (変更後) | ||
+ | {{: | ||
- | -Add @nuxtjs/ | + | {{:18.nuxt.jsとbulmaでハンバーガーメニュー: |
- | -Add @nuxtjs/ | + | |
- | | + | ===== ハンバーガーメニューをトグルさせる ===== |
- | だそうです。 | + | 横幅を狭くすると、画面右上にハンバーガーメニューが出てきますが、それをクリックしても何も起こりません。 |
- | < | + | isMenuActiveというプロパティとtoggleMenuというメソッドを定義して、ハンバーガーメニューをクリックすると、縦方向にリンクが表示されるようにします。 |
- | { | + | |
- | modules: [ | + | |
- | ' | + | |
- | ] | + | |
- | } | + | |
- | </ | + | |
< | < | ||
+ | < | ||
+ | ... | ||
+ | <div class=" | ||
+ | ... | ||
+ | <div class=" | ||
+ | ... | ||
+ | </ | ||
- | build: { | + | < |
- | /* | + | export default |
- | ** You can extend webpack config here | + | data: () => { |
- | */ | + | |
- | postcss: | + | }, |
- | | + | |
- | " | + | |
- | features: { | + | this.isMenuActive = !this.isMenuActive |
- | customProperties: false | + | |
- | | + | |
- | } | + | |
- | } | + | |
- | | + | |
- | extend(config, ctx) {} | + | |
} | } | ||
+ | } | ||
+ | </ | ||
</ | </ | ||
+ | {{: | ||
+ | {{: | ||
+ | *これで、トグルするようにはなったのですが、リンク先の飛んでも、メニューが開いたままになってしまっています。 | ||
+ | *そこで、『ページ遷移』(=リンクがクリックされる)したときに、メニューが閉じる(isMenuActiveプロパティがfalseになる)ようなプログラムを実装します。 | ||
+ | *このときに、Vuexを用いると、コンポーネント間の" | ||
- | {{:18.nuxt.jsとbulmaでハンバーガーメニュー: | + | 詳細はhttps://qiita.com/ |
- | {{:18.nuxt.jsとbulmaでハンバーガーメニュー: | + | *isMenuActiveの状態管理に、Vuexを使った方がよい |
+ | *Nuxt.jsアプリでは、< | ||
- | {{:18.nuxt.jsとbulmaでハンバーガーメニュー: | + | ===== Vuexストアを設定する ===== |
+ | isMenuActiveプロパティの状態(trueかfalseか)を、Vuexストアで管理します(状態管理)。 | ||
+ | Nuxt.jsには、デフォルトの状態でVuexが入っており、store/ | ||
+ | 『クラシックモード』と、『モジュールモード』があるらしいです。 | ||
- | ==== font awesome 5について ==== | + | 参考:https:// |
+ | {{: | ||
- | https:// | + | store/index.js (新規作成) |
- | {{:18.nuxt.jsとbulmaでハンバーガーメニュー: | + | < |
- | →ん?、https:// | + | import Vuex from ' |
- | {{: | + | |
- | →https:// | + | |
- | {{: | + | |
- | Weekly Downloadsが23万、、、すごい。。。 | + | |
- | *Add Dependencyから、@fortawesome/ | + | const store = () => new Vuex.Store({ |
- | {{:18.nuxt.jsとbulmaでハンバーガーメニュー: | + | |
+ | isMenuActive: false | ||
+ | }, | ||
+ | mutations: { | ||
+ | toggleMenu (state) { | ||
+ | state.isMenuActive = !state.isMenuActive | ||
+ | }, | ||
+ | resetMenu (state) { | ||
+ | state.isMenuActive = false | ||
+ | | ||
+ | } | ||
+ | }) | ||
+ | export default store | ||
+ | </ | ||
+ | {{: | ||
+ | *layouts/ | ||
+ | < | ||
+ | ... | ||
+ | <div class=" | ||
+ | ... | ||
+ | <div class=" | ||
+ | ... | ||
+ | </ | ||
+ | {{: | ||
+ | *VisualStudioCodeのターミナル画面で、一度、Ctrl+C => Y => Enterで、サーバを停止したのち、再度、< | ||
+ | {{: | ||
+ | ===== ページ遷移したときにトグルが閉じるようにする ===== | ||
- | 参考 | + | ページ遷移したとき、すなわち、新しいページが描画されてfetch()メソッドを呼び出されたときにトグルが閉じるように(isMenuActiveがfalseになるように)します。 |
- | https://qiita.com/riversun/items/4faa56ac40071f638313 | + | 具体的には、各pages/index.vue, about.vue, contact.vueの< |
- | @riversun | + | < |
- | 2019年01月18日に更新 | + | < |
- | 1年後に差がつくFont Awesome5 ~フロントエンド開発(ES6, | + | export default { |
+ | fetch({ store }) { | ||
+ | store.commit(" | ||
+ | } | ||
+ | }; | ||
+ | </script> | ||
+ | </code> | ||
+ | pages/index.vue | ||
+ | {{: | ||
+ | pages/ | ||
+ | {{:18.nuxt.jsとbulmaでハンバーガーメニュー: | ||
+ | pages/ | ||
+ | {{: | ||
+ | 今回は以上となります。 | ||
+ | ===== ソースコード ===== | ||
+ | ソースコード | ||
+ | https:// | ||
- | https:// | + | スクリーンショット |
- | @OvThAlmin | + | {{: |
- | 2018年10月28日に更新 | + | |
- | nuxt-fontawesomeを使って Nuxt.jsへFont Awesome 5を導入する | + | ===== 今回写経させていただいたサイト ===== |
- | →これがよさそうです。やってみます。 | + | https:// |
+ | {{:18.nuxt.jsとbulmaでハンバーガーメニュー: | ||
- | -Add Dependencyから、nuxt-fontawesome, | ||
- | -nuxt.config.jsに以下を追記 | ||
- | < | ||
- | module.exports = { | ||
- | | ||
- | ' | ||
- | ], | ||
- | // | ||
- | | ||
- | imports: [ | ||
- | { | ||
- | set: ' | ||
- | icons: [' | ||
- | } | ||
- | ] | ||
- | } | ||
- | } | ||
- | </ | ||
- | {{: | ||
- | {{: | ||
- | {{: | ||
- | {{: | ||
- | {{: | ||
- | https:// | ||
行 192: | 行 263: | ||
目次: | 目次: | ||
- | 前: | + | 前:[[17.nuxt.jsのvuexでパスワード制限: |
- | 次: | + | 次:[[19.nuxt.jsで画像一覧アプリ: |
18.nuxt.jsとbulmaでハンバーガーメニュー/index.html.1549639832.txt.gz · 最終更新: 2019/02/08 by adash333