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/08] – [ソースコード] adash333 | ||
---|---|---|---|
行 22: | 行 22: | ||
ソースコード | ソースコード | ||
+ | https:// | ||
- | + | スクリーンショット | |
- | + | {{: | |
- | Demo | + | |
===== 開発環境 ===== | ===== 開発環境 ===== | ||
行 57: | 行 57: | ||
-作者名は? => (Enter) | -作者名は? => (Enter) | ||
-パッケージマネージャは? => npmじゃなくてyarn | -パッケージマネージャは? => npmじゃなくてyarn | ||
+ | {{: | ||
+ | < | ||
+ | cd Nuxt-Bulma-Hamburger3 | ||
+ | yarn run dev | ||
+ | </ | ||
+ | {{: | ||
+ | *アドレスをCtrlを押しながらクリックすると、以下のページが開きます。 | ||
+ | {{: | ||
+ | これで、Nuxt.jsでBulmaを使用する準備が出来ました。 | ||
+ | ===== インデックスページ以外のページ(about.vueとcontact.vue)を作成 ===== | ||
+ | pages/ | ||
+ | pages/ | ||
+ | < | ||
+ | < | ||
+ | <section class=" | ||
+ | <div class=" | ||
+ | <h1 class=" | ||
+ | <h2 class=" | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | {{: | ||
+ | pages/ | ||
+ | < | ||
+ | < | ||
+ | <section class=" | ||
+ | <div class=" | ||
+ | <h1 class=" | ||
+ | <h2 class=" | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | {{: | ||
- | + | ===== ナビゲーションバーのコンポーネントを作成する ===== | |
- | 作成中 | + | components/ |
- | + | ||
- | + | ||
- | + | ||
- | だいぶ時間がかかる。 | + | |
- | {{:17.nuxt.jsのvuexでパスワード制限: | + | |
- | まだ時間がかかる。なんか、10分くらいかかった気がします。 | + | |
- | {{: | + | |
- | *以下を入力して、確認します | + | |
< | < | ||
- | cd Nuxt-Vuex-FireAuth | + | < |
- | yarn run dev | + | <nav class=" |
+ | <div class=" | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | </ | ||
+ | </ | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
</ | </ | ||
- | いきなりエラーが出ますが、1分以内に起動しました。 | ||
- | {{: | ||
- | アドレスをCtrlを押しながらクリックすると、以下のページが開きます。 | ||
- | {{: | ||
- | あまりかっこよくありません。Nuxt-Vuetifyの方たちのセンスなんでしょうか。。。 | ||
- | {{: | ||
- | しかし、左側のハンバーガーメニューをクリックして、Inspire をクリックすると、ちゃんと、Inspireのページに飛びます。 | ||
- | アイコンもちゃんと使用できるようです。(Vue.js+Vuetifyにアイコンをインストールするのが面倒なので、これはうれしいです。) | ||
- | {{: | ||
- | {{: | ||
- | なお、アイコンは、MDのようです。MDのアイコンは、以下から探すことができます。 | + | このNavbar.vueを、layouts/default.vue内に表示するようにします。 |
- | https://material.io/ | + | |
- | {{: | + | |
- | + | ||
- | Nuxt.jsアプリの中身を見てみます。 | + | |
layouts/ | layouts/ | ||
- | {{: | + | (変更前) |
- | pages/ | + | {{:18.nuxt.jsとbulmaでハンバーガーメニュー:pasted:20190208-182646.png}} |
- | {{:17.nuxt.jsのvuexでパスワード制限:pasted:20190206-162524.png}} | + | (変更後) |
- | .nuxt/ | + | {{:18.nuxt.jsとbulmaでハンバーガーメニュー:pasted:20190208-182944.png}} |
- | {{:17.nuxt.jsのvuexでパスワード制限:pasted:20190206-162904.png}} | + | |
- | ローカルのパソコンで扱う分(普通はCodeSandboxは使わずに、こちらですよね)には、Nuxt.jsは十分魅力的です。Vue.jsと比べて、インストールに時間がかかるのが難点ですが。 | + | {{:18.nuxt.jsとbulmaでハンバーガーメニュー: |
- | ちなみに、layouts/ | + | ===== ハンバーガーメニューをトグルさせる ===== |
- | {{: | + | 横幅を狭くすると、画面右上にハンバーガーメニューが出てきますが、それをクリックしても何も起こりません。 |
- | < | + | isMenuActiveというプロパティとtoggleMenuというメソッドを定義して、ハンバーガーメニューをクリックすると、縦方向にリンクが表示されるようにします。 |
- | <script src=" | + | |
- | </ | + | |
- | 参考:https:// | + | < |
- | {{:17.nuxt.jsのvuexでパスワード制限:pasted: | + | < |
+ | ... | ||
+ | <div class=" | ||
+ | ... | ||
+ | <div class=" | ||
+ | ... | ||
+ | </ | ||
- | https://qiita.com/soarflat/ | + | < |
- | @soarflat | + | export default { |
- | 2018年07月24日に更新 | + | data: () => { |
- | Prettier 入門 ~ESLintとの違いを理解して併用する~ | + | return {isMenuActive: |
+ | }, | ||
+ | methods: { | ||
+ | toggleMenu () { | ||
+ | this.isMenuActive = !this.isMenuActive | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | </script> | ||
+ | </code> | ||
+ | {{: | ||
+ | {{: | ||
+ | *これで、トグルするようにはなったのですが、リンク先の飛んでも、メニューが開いたままになってしまっています。 | ||
+ | *そこで、『ページ遷移』(=リンクがクリックされる)したときに、メニューが閉じる(isMenuActiveプロパティがfalseになる)ようなプログラムを実装します。 | ||
+ | *このときに、Vuexを用いると、コンポーネント間の" | ||
+ | 詳細はhttps:// | ||
+ | *isMenuActiveの状態管理に、Vuexを使った方がよい | ||
+ | *Nuxt.jsアプリでは、< | ||
+ | ===== Vuexストアを設定する ===== | ||
+ | isMenuActiveプロパティの状態(trueかfalseか)を、Vuexストアで管理します(状態管理)。 | ||
+ | Nuxt.jsには、デフォルトの状態でVuexが入っており、store/ | ||
+ | 『クラシックモード』と、『モジュールモード』があるらしいです。 | ||
+ | 参考:https:// | ||
+ | {{: | ||
+ | store/ | ||
+ | < | ||
+ | import Vuex from ' | ||
+ | const store = () => new Vuex.Store({ | ||
+ | state: { | ||
+ | isMenuActive: | ||
+ | }, | ||
+ | mutations: { | ||
+ | toggleMenu (state) { | ||
+ | state.isMenuActive = !state.isMenuActive | ||
+ | }, | ||
+ | resetMenu (state) { | ||
+ | state.isMenuActive = false | ||
+ | } | ||
+ | } | ||
+ | }) | ||
- | ===== インデックスページ以外のページ(about.vueとcontact.vue)を作成 ===== | + | export default store |
- | pages/ | + | </code> |
- | + | {{: | |
- | <html> | + | |
- | <script src=" | + | |
- | </ | + | |
- | + | ||
- | 参考:https:// | + | |
- | + | ||
- | {{: | + | |
- | + | ||
- | {{:18.nuxt.jsとbulmaでハンバーガーメニュー: | + | |
- | + | ||
- | あれ、、、うまくいかない。今日はここまで。。。 | + | |
- | + | ||
- | https:// | + | |
- | こちらを使うのがよいのか? | + | |
- | + | ||
- | -Add @nuxtjs/ | + | |
- | -Add @nuxtjs/ | + | |
- | -You will need to use postcss loader if you are not already using it. | + | |
- | だそうです。 | + | |
< | < | ||
- | { | + | ... |
- | | + | <div class=" |
- | | + | ... |
- | ] | + | <div class=" |
- | } | + | ... |
</ | </ | ||
+ | {{: | ||
+ | *VisualStudioCodeのターミナル画面で、一度、Ctrl+C => Y => Enterで、サーバを停止したのち、再度、< | ||
+ | {{: | ||
+ | |||
+ | ===== ページ遷移したときにトグルが閉じるようにする ===== | ||
+ | ページ遷移したとき、すなわち、新しいページが描画されてfetch()メソッドを呼び出されたときにトグルが閉じるように(isMenuActiveがfalseになるように)します。 | ||
+ | 具体的には、各pages/ | ||
< | < | ||
- | + | < | |
- | | + | export default |
- | /* | + | |
- | ** You can extend webpack config here | + | |
- | */ | + | |
- | postcss: | + | |
- | plugins: | + | |
- | "postcss-preset-env": { | + | |
- | features: { | + | |
- | customProperties: | + | |
- | } | + | |
- | } | + | |
- | } | + | |
- | }, | + | |
- | extend(config, | + | |
} | } | ||
+ | }; | ||
+ | </ | ||
</ | </ | ||
+ | pages/ | ||
+ | {{: | ||
+ | pages/ | ||
+ | {{: | ||
+ | pages/ | ||
+ | {{: | ||
- | {{: | + | 今回は以上となります。 |
- | {{: | + | |
- | {{: | + | ===== ソースコード ===== |
+ | ソースコード | ||
+ | https:// | ||
- | ==== font awesome 5について ==== | + | スクリーンショット |
+ | {{: | ||
- | https:// | + | ===== 今回写経させていただいたサイト ===== |
- | {{: | + | https://qiita.com/isamusuzuki/items/5ec800e423a3a56ef03d |
- | →ん?、https:// | + | {{: |
- | {{: | + | |
- | →https://www.npmjs.com/package/@fortawesome/fontawesome-free へ行ってみる | + | |
- | {{: | + | |
- | Weekly Downloadsが23万、、、すごい。。。 | + | |
- | *Add Dependencyから、@fortawesome/ | ||
- | {{: | ||
- | 参考 | ||
- | https:// | ||
- | @riversun | ||
- | 2019年01月18日に更新 | ||
- | 1年後に差がつくFont Awesome5 ~フロントエンド開発(ES6, | ||
- | |||
- | |||
- | |||
- | https:// | ||
- | @OvThAlmin | ||
- | 2018年10月28日に更新 | ||
- | nuxt-fontawesomeを使って Nuxt.jsへFont Awesome 5を導入する | ||
- | →これがよさそうです。やってみます。 | ||
- | |||
- | -Add Dependencyから、nuxt-fontawesome, | ||
- | -nuxt.config.jsに以下を追記 | ||
- | < | ||
- | module.exports = { | ||
- | | ||
- | ' | ||
- | ], | ||
- | |||
- | |||
- | // | ||
- | | ||
- | imports: [ | ||
- | { | ||
- | set: ' | ||
- | icons: [' | ||
- | } | ||
- | ] | ||
- | } | ||
- | } | ||
- | </ | ||
- | |||
- | {{: | ||
- | {{: | ||
- | {{: | ||
- | {{: | ||
- | {{: | ||
- | https:// | ||
18.nuxt.jsとbulmaでハンバーガーメニュー/index.html.txt · 最終更新: 2019/02/09 by adash333