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] (現在) – [ソースコード] adash333 | ||
---|---|---|---|
行 3: | 行 3: | ||
テンプレートをいろいろ探したが、しっくりくるものを見つけられずに困っていた。 | テンプレートをいろいろ探したが、しっくりくるものを見つけられずに困っていた。 | ||
+ | |||
+ | 「ハンバーガーメニューはユーザーフレンドリーではない」という意見は置いておいて、とりあえず、やってみる。 | ||
以下のサイトを写経してみたい。 | 以下のサイトを写経してみたい。 | ||
行 44: | 行 46: | ||
npm install -g yarn | npm install -g yarn | ||
//@vue/cli (Vue clientのVersion3)のインストール | //@vue/cli (Vue clientのVersion3)のインストール | ||
- | yarn global add @vue/cli | + | //yarn global add @vue/cli |
+ | // | ||
+ | //' | ||
+ | // | ||
+ | // | ||
+ | npm install -g @vue/cli | ||
</ | </ | ||
行 54: | 行 61: | ||
{{: | {{: | ||
+ | このように、yarnで@vue/ | ||
+ | |||
+ | ' | ||
+ | |||
+ | とエラーが出てしまった。最初からnpm でインストールすればよかった。。。 | ||
+ | |||
+ | < | ||
+ | //@vue/cli (Vue clientのVersion3)のインストール | ||
+ | npm install -g @vue/cli | ||
+ | npm -V | ||
+ | </ | ||
+ | |||
+ | {{: | ||
+ | |||
+ | 構築した環境 | ||
+ | < | ||
+ | @vue/cli 3.2.1 | ||
+ | </ | ||
+ | |||
+ | Nuxt.jsを利用するだけなら、@vue/ | ||
+ | |||
+ | ===== 新規Nuxt.jsプロジェクトの作成 ===== | ||
+ | C:/ | ||
+ | |||
+ | < | ||
+ | npx create-nuxt-app Nuxt-Bulma-Hamburger | ||
+ | // | ||
+ | //rendering modeはSingle Page Appを選択 | ||
+ | </ | ||
+ | |||
+ | |||
+ | {{: | ||
+ | |||
+ | {{: | ||
+ | |||
+ | {{: | ||
+ | |||
+ | なんかここで止まってしまったが、とりあえずVisualStudioCodeを閉じた。 | ||
+ | |||
+ | C: | ||
+ | |||
+ | < | ||
+ | npm install | ||
+ | // | ||
+ | npm run dev | ||
+ | // | ||
+ | // | ||
+ | </ | ||
+ | |||
+ | {{: | ||
+ | |||
+ | {{: | ||
+ | |||
+ | やはり、フルスタックフレームワークであるNuxt.jsは、AngularやIonicと同じくらい、HelloWorldには時間がかかる。 | ||
+ | |||
+ | Vue.js(@vue/ | ||
+ | |||
+ | ファイル構造は、以下のようになっている。 | ||
+ | |||
+ | 今回は、pages, | ||
+ | |||
+ | {{: | ||
+ | |||
+ | ===== AboutページとContactページの作成 ===== | ||
+ | |||
+ | pages/ | ||
+ | |||
+ | {{: | ||
+ | |||
+ | pages/ | ||
+ | |||
+ | 同様に、Contactページも作成する。 | ||
+ | |||
+ | pages/ | ||
+ | {{: | ||
+ | |||
+ | 参考:https:// | ||
+ | {{: | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | ===== ナビゲーションバーのComponentを作成 ===== | ||
+ | Bulmaフレームワークを利用して、レスポンシブなナビゲーションバーを作成する。 | ||
+ | |||
+ | コンポーネントは、名前の通り、components/ | ||
+ | |||
+ | components/ | ||
+ | {{: | ||
+ | |||
+ | Navbarコンポーネントを、レイアウトファイルに取り付ける。 | ||
+ | |||
+ | 具体的には、 layouts/ | ||
+ | |||
+ | (変更前) | ||
+ | {{: | ||
+ | |||
+ | (変更後) | ||
+ | {{: | ||
+ | |||
+ | あまりカッコヨクナイ、、、 | ||
+ | |||
+ | ブラウザの横幅を広げるとこんな感じになる。 | ||
+ | |||
+ | {{: | ||
+ | |||
+ | ブラウザの横幅(px, | ||
+ | |||
+ | 参考:[[https:// | ||
+ | |Bulma公式サイトのNavbarの説明]] | ||
+ | {{: | ||
+ | |||
+ | https:// | ||
+ | {{: | ||
+ | |||
+ | Bulmaのtouch deviceとは、横幅が1023px以下とのことだそうです。 | ||
+ | |||
+ | もうちょっと横幅が小さくなってからハンバーガーメニュー出してほしいのだけれど、、、 | ||
+ | |||
+ | https:// | ||
+ | {{: | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | ===== ハンバーガーメニューをトグル(クリックするとメニューを表示)するようにする ===== | ||
+ | 横幅を狭くしたときに、タイトルと、ハンバーガーメニューが一行におさまりきらない原因は不明であった。。。 | ||
+ | |||
+ | とりあえず次に進む。 | ||
+ | |||
+ | components/ | ||
+ | |||
+ | <div class=" | ||
+ | |||
+ | <div class=" | ||
+ | |||
+ | これで、ブラウザの横幅が1023px以下のときにハンバーガーメニューが出て、それをクリックすると、メニューが表示されるようになった。 | ||
+ | {{: | ||
+ | |||
+ | しかし、この時点では、メニューの中のリンク先をクリックしても、トグルされたメニューが開いたままになってしまって閉じてくれない。 | ||
+ | |||
+ | そこで、Vuexを用いて、リンク先をクリックすると、自動的にトグルが閉じるようにする。 | ||
+ | |||
+ | ===== Vuexストアを設定してトグルONとOFFをstoreに定義 ===== | ||
+ | |||
+ | store/ | ||
+ | |||
+ | {{: | ||
+ | |||
+ | storeに、isMenuActive (True or False)の状態を定義しておいて、 | ||
+ | |||
+ | -ハンバーガーメニューをクリックしたらON、OFF | ||
+ | -リンクをクリックしてページ遷移したらOFF | ||
+ | となるようにしておきます。 | ||
+ | |||
+ | components/ | ||
+ | |||
+ | <div class=" | ||
+ | < | ||
+ | //変更前 | ||
+ | @click=" | ||
+ | //変更後 | ||
+ | @click=" | ||
+ | </ | ||
+ | |||
+ | <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:// | ||
+ | |||
+ | ===== Navbar-brandをNavbar-blandとタイプミスしていた ===== | ||
+ | |||
+ | ハンバーガーメニューがずれていたので、何がおかしいのかずっと分からなかったが、Navbar-brandのタイプミスであった。 | ||
+ | |||
+ | VisualStudioCodeの拡張機能で、Bulmaのタイプミスを指摘してくれるものはないかな??? | ||
+ | |||
+ | components/ | ||
+ | |||
+ | (変更前) | ||
+ | {{: | ||
+ | |||
+ | (変更後) | ||
+ | {{: | ||
+ | |||
+ | これでやっと写経できた。 | ||
+ | |||
+ | ===== Nuxt.jsでお勧めの本(2018年現在) ===== | ||
+ | |||
+ | 以下の本がお勧めですが、vue.jsについての本と合わせて読むのがお勧めです。 | ||
+ | |||
+ | < | ||
+ | <iframe style=" | ||
+ | </ | ||
+ | |||
+ | vue.js入門の本としては、以下の2冊がお勧めです。 | ||
+ | |||
+ | こちらの本は、Vue.jsとfirebaseで、マークダウンエディターのサイトを実際に作っていくことができます。Vue.js入門の最初の1冊としてお勧めです。 | ||
+ | |||
+ | < | ||
+ | <iframe style=" | ||
+ | </ | ||
+ | |||
+ | こちらの本は、Vue.jsの状態管理(Angularでのprovider、ReactにおけるRedux)Vuexについての説明が分かりやすかったです。 | ||
+ | テスト駆動開発についても詳しく書かれています。 | ||
+ | < | ||
+ | <iframe style=" | ||
+ | </ | ||
- | ===== リンク ===== | ||
z_blog/2018/181201_nuxt_bulma_responsive.txt · 最終更新: 2018/12/02 by adash333