Laravel6.0:Vue.jsコンポーネントをBladeテンプレートと併用する2019-11-01はじめてLaravel6.0:Vue.jsコンポーネントをBladeテンプレートと併用するWeb:はじめてLaravel6.0(PHP)今回は、Laravel6.0でVue.jsのコンポーネントを使用するやり方を確認します。はじめにLaravel6.0をインストールしただけでは、Vue.jsは使えません。--auth」を実行することです。--auth」は「認証画面」を使えるようにするものですが、同時に「Vue.js」もインストールしてくれます。ここから先の説明は、上記の記事の内容が実行済で、Vueが使えるようになっている環境であるということを前提にします。Vue.jsコンポーネントを動かす方法Laravel(正確にはBladeテンプレート内)でVue.jsを動かす手順は以下の通りです。is="app"></div>内に書く。defer></script>です。defer></script>のようにすれば良いということです。注意点として「app.js」はHTMLパース後に読み込まれないといけないので、よく、</body>の直前くらいに書くように説明されている場合がありますが、上記例のように「defer」付きなら、上の方に書いても大丈夫です。qiita.comとはいえ。--auth」を実行済なら、何もしなくて良いです。コマンド実行時に生成される「layouts」フォルダの「app.blade.php」内には、すでに上記が組み込まれているからです。そこを消してないなら、Laravelの付属サンプル「ExampleComponent.vue」は以下のようにするだけで動きます。@extends('layouts.app')@section('content')<example-component></example-component>@endsection動かして、こんな感じの表示がでれば、Vue.jsコンポーネントは動いてます。Vue.jsコンポーネントをひとつ作ってみるさて。サンプルが動いたのを確認できたら、ひとつコンポーネントを作ってみます。今回は、超簡単に「今日の日付を表示する」だけのコンポーネントにします。新たにコンポーネントを作成して、動かす手順は。Vue.jsでコンポーネントを作るapp.jsに定義を追加する。JavaScriptコードをコンパイルするbladeに組み込んで使うです。Vue.jsでコンポーネントを作るまず、resources\js\componentsフォルダに以下のようなソースを作り、「TodayComponent.vue」とでも名前をつけて保存します。}</script>JavaScriptのDate()で、年月日を取得しているだけの、なんの変哲もない処理です。app.jsに定義を追加する作成したVue.jsコンポーネントを「app.js」に登録します。exsample-componentの例がありますので、それをコピーして、必要な部分を書き直すだけでできます。今回は、こんな感じです。require('./components/TodayComponent.vue').default);こうしておくと、「<today></today>」タグで使えるようになります。JavaScriptコードをコンパイルする最初、必ずハマりますが(笑)Vue.jsはソースを修正するだけでは動きません。コンパイルが必要です。app.jsに登録しても、コンパイルしていないと認識されません。コンパイルには、以下を実行します。devうまくいくと、こんな画面になります。ない場合はエラーメッセージが表示されます。なると、修正してコンパイルしなおします。エラーメッセージが英語だったり、ちょっと慣れないと見づらいですが、ここは頑張るしかないです。bladeに組み込んで使うコンパイルが通ったら、使えるようになります。適当な入力画面に追加して動かしてみます。確認のためにわざわざ画面を作るのは面倒なので、組み込むベースになる画面は以下の記事で作ったものを使います。class="row"><today></today></div>を適当なところにおいて、表示確認してみます。XAMPPでMySQLサーバーを起動して。serve」で動かして。ブラウザで、URL「http://localhost:8000/dummy」にアクセスします。表示されると、こんな感じ。今日の日付が表示されました(笑)とりあえず、Vueコンポーネントを新規に作成して、bladeテンプレートに組み込んで使うという最低限のことは確認できました。今回はこんな感じですかね。検索スポンサーリンク最近のアクセスTOP5ブクマ数TOP3IT的なTIPS・ノウハウイベントログから抽出したログオン・オフ時刻を見やすいように整形するEXCELのVBAマクロなど。Google検索は利用するけど、アクティビティを保存させたくない時もある文字コードで悩まされるなんて久しぶり/JIS7(ISO-2022-JP)とJIS8の話もっと見る作業時によく参照する「まとめ」djangoテンプレート内でforループで回す時の整理とデフォルト辞書利用時の注意など。djangoテンプレート内ので条件分岐(IF文)で注意することなどをまとめておくdjangoテンプレート/変数の値の参照の仕方が、Pythonと違う所があるので整理しておく。service」とサーバーレスコンピューティング関係をまとめてみる。PWA・SPA・・など「最近のWEBアプリケーションの種類」をざっくりまとめる。文系的まとめディープラーニング(ニューラルネットワーク)の「学習」の肝は「微分」らしいよ。Consoleもっと見るディープラーニングのデモをやってみるWord2Vecで「単語の足し算・引き算の結果(単語)を取得する」デモをやってみる。API」で入力文の疑わしい部分をAIが指摘するデモを作る。classで事前学習済のVGG16モデルを使った画像識別クラス/tensorflow2.0(tf.keras)ランダムフォレストで回帰してみる/気象情報と電力データその2もっと見るPythonでWebアプリやってみるviews.py(python)からデータを渡して、Chart.jsでRaderチャートを描く/Chart.js+djangoWEBブラウザ上にドラッグ&ドロップした画像ファイルをBase64に変換して表示するWEBブラウザで手描きしたイメージをJPEG・PNG変換後Base64エンコードするもっと見るPythonで自動化やってみるWebアプリケーションで自動的に値を参照、スクロール他Tips/Selenium&pythonWebアプリケーションで自動的に何かをクリックするTips/Selenium&pythonWebアプリケーションへの自動入力・選択のTipsあれこれ/Selenium&pythonもっと見るPythonで数学・グラフィックスやってみるモンティ・ホール問題で、ちょっと暇つぶし。最近、台風が怖すぎる!!!生産性向上しろと言いながら、片方で足をひっぱるなんて・・と呆れてます。/軽減税率のニュースを見てもっと見るBOKU62歳の文系SE”BOKU”です。<arakan_no_boku@yahoo.co.jp>興味の向いたものを、つまみ食い的に勉強してます。自分が消化した内容を、頭の整理と備忘を兼ねてブログに書いてます。IT系・・特に機械学習・プログラムネタが中心ですが、IT以外のネタになる時もあります。(43)スポンサーリンクはてなブログをはじめよう!arakan_no_bokuさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。