Allied ArchitectsAllied ArchitectsEngineer Blog

第一章4 『bladeファイルとVueコンポーネントの初期設定』

2022/03/4 Laravel

ターミナルで以下を実行してbladeファイルとVueのファイルを作成。

 

bladeファイルからVueコンポーネントを呼び出せるようにする。
resources/js/app.jsを以下のように編集する。

 

120.0.1にアクセスした時にtodo_list.blade.phpが表示されるようにする。
routes/web.phpを以下のように編集する。

 

フォントファミリーと今回使う色を登録しておく。
resources/css/app.cssを以下のように編集する。

 

Material Icons Guide
Noto Sans Japanese
バージョニング/キャッシュの破棄

フォントとアイコンを使うためのリンクとjsとcssの読み込みとVueコンポーネントの設置をする。あと body の背景色も bg-gray で変更しておく。
resources/views/todo_list.blade.phpを以下のように編集する。
今回はこのファイルしかないからlayout.blade.phpとかに切り出すメリットなかったのでこのまま。(テンプレート継承を使用するレイアウト

 

resources/js/components/TodoList.vueを以下のように編集する。

 

変更したものを反映させる。

 

127.0.0.1 にアクセスして表示の確認。

 

こんな感じに表示されてれば成功。
npm run watchしてコンポーネントにいろいろ書いていく

 

Container
Using CSS and @layer
初期の.containerの挙動が気に入らなかったのでapp.cssに以下を追加してmax-widthが常に1280pxになるようにした。
resources/css/app.cssに以下を追加。

 

Height
Box Shadow
Font Size
Line Height Arbitrary values
ヘッダー作る。TodoList.vueをこんな感じに編集。

 

127.0.0.1 にアクセスして表示の確認。

こんな感じなった。

れっちり
  • れっちり
  • 2021年新卒入社。letroの開発・運用業務を担当しています。

RELATION ENTRY

第一章11『子コンポーネントにプロパティを渡してグループ分けしたtodoを表示する』

第一章11『子コンポーネントにプロパティ...

2022/04/22 Vue.js

前回、todoを期限でグループ分けしたのでtodoGroupsの中のtodoにアクセスするためにはtodoGroups.within.today.todos[0]というようにする必要がある。また、todoGroups.within.todayまで到達したあとの処理は期限切れ、今日のもの、明日のもの、...

続きを読む

第一章10 『取得したtodoを期限でグループ分けする』

第一章10 『取得したtodoを期限でグ...

2022/04/18 Vue.js

取得した後に期限ごとにグループ分けをしたいので関数を追加する。 まず、getTodos関数によって取得したtodosはidの昇順になっているので、期限の日付で並び替えを行う。 以下の関数をmethodsに追加する。getTodos関数で取得してきたtodosをdataのtodos(以後this....

続きを読む

れっちりの記事一覧へ

ページTOPへ