#3スニペット以上、日記以下。時間がかかったところ寄り道をしたけど前に進んでいる!VuetifyとはVue用のUIコンポーネントでマテリアルデザインが簡単に?実現できるようです。Vuetify関連でググってみていましたが、あまり情報がなく導入に苦戦したので今回手順を共有したいと思います。導入方法まずはnpmでvuetifyをインストールしましょう。--savenpmのインストールが完了したらresources/js/app.jsにvuetifyに修正を加えます。Vuetifyをインポートしvueインスタンスに追加するように記述を変更してください。Vuetify()});インスタンスの修正が終わったらテンプレートにvuetifyのコンポーネントを書いてみましょう。VuetifyをExampleComponent.vueのテンプレート(最初から入っているやつ)で使うとすると以下のようになります。</v-app></template>内容としてはマテリアルデザインのボタンを配置するというシンプルなものです。これでprimaryボタンが以下のように出力されたかと思います。レイアウトのメインとなるコンテンツ。サイドメニューはここに入らない。グリッドのラッパーといった感じです。時間がかかったところこの一連の流れでハマってしまって時間を費やしたポイントは、vuetifyのすべての要素はv-appの中になければならないVueインスタンスにVuetifyを追加することでした。VueインスタンスにVuetifyを渡すのは公式ドキュメントにも記載がありますね。見れていなかった自分が恥ずかしいです。Vuetifyの設定をしたら、それをVueインスタンスに渡してあげます。https://vuetifyjs.com/ja/getting-started/quick-start#vuetify%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%AE%E3%83%96%E3%83%BC%E3%83%88%E3%82%B9%E3%83%88%E3%83%A9%E3%83%83%E3%83%97イケてる感じはしますがVuetifyに慣れる(使いこなす)のに時間かかりそうだなあとは思いました。寄り道をしたけど前に進んでいる!Vue自体の勉強ではないですが、一つ一つ前にすすんでいる感じがします。わからないなーって時間費やしているときも実はいい勉強なんですよね。#2Vueの基本的なv-onとv-bindディレクティブの説明と、初心者が忘れがちなそれらの省略記法を紹介しております。覚えやすいような筆者なりの解釈も紹介しております。Vue成長日記と第して複数回に投稿したブログをまとめました。公式サイトをみつつこちらを参考にすると学習が捗るはずです。#6VueのSlotについて簡単な例を挙げながらどういったものかを解説しています。公式のドキュメントではわかりづらかったものを実際に動かしながら確認することができます。6がリリースされてVueがデフォルトでは利用できなくなっていることに気が付きました。Laravel5系と同様にVueのサンプルを導入する方法をご紹介しております。Worldを出力させる方法をまとめました。GoのRevelで作ったAPIと連携する方法もまとめています。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。海外ネタや開発・プログラミングをメインにお役にたてる情報を発信していきたいと思います。スニペット以上、日記以下。海外ネタや開発・プログラミングをメインにお役にたてる情報を発信していきたいと思います。最近のコメントスポンサーリンクタイトルとURLをコピーしました。