目次
はじめに
この記事では前回の設計を基にさっそくプロジェクトを作成していきます。
目的(ゴール)/今回試したいこと
1.プロジェクト作成
2.トップページの作成
環境に関して
Laravel 6.8
※5.8はセキュリティ修正が行われないとのことなので6.8を採用。(教えてくださったやんばるさんありがとうございました。) 参考
PHP 7.3
Windows/XAMPP/MySQL
1.プロジェクトの作成
①以前作成したこちらを基にVue.js実装。
Laravelの認証コマンド実行して実装しました。

②このプロジェクト用にファイル名を変更
welcome.blade.phpをindex.blade.phpに編集。
それに伴いweb.phpも編集。
2.トップページの作成
工程1.フォルダコンポーネントの作成
①js/components/Folder.vueの作成
<template> <div> Folder </div> </template>
②app.jsの編集
コンポーネントのインポートと登録
import Folder from './components/Folder.vue' ~~省略 const app = new Vue({ el: '#app', components: { Folder }, })
③index.blade.phpを編集
<div id="app"> <Folder /> </div>

工程2.タスクコンポーネントの作成
①js/components/Task.vueの作成
<template> <div> Task </div> </template>
②App.vueの作成
③app.jsの編集
コンポーネントのインポートと登録
import App from './App.vue' ~~省略 const app = new Vue({ el: '#app', components: { App //edit }, })
③index.blade.phpを編集
<div id="app"> <App /> //edit </div>
表示。(わかりやすいように色付け。ちょっとうるさいけど笑)

躓いた点
1.Blade側から複数のコンポーネントを呼び出せない
起因:Taskを呼び出す際に起きた
①app.jsの編集
コンポーネントのインポートと登録
import Task from './components/Task.vue' ~~省略 const app = new Vue({ el: '#app', components: { Folder, Task }, })
②index.blade.phpを編集
<div id="app"> <Folder /> <Task /> </div>
表示されなかった。
解決策:親コンポーネント(1つのコンポーネント)にまとめる
2.HTMLタグと競合
起因:コンポーネントの命名時
①Folder、Taskコンポーネントを1つにまとめるためにBase.vueを作成
②index.blade.phpを編集
<div id="app"> <Base /> </div>
HTMLタグとして読み込まれ、表示されなかった。

解決策:HTMLタグに被るものを使わない。
おわりに
ここ最近何度もLaravel×Vue.jsのプロジェクト作成はしていましたが、簡易的なトップページの作成でも結構時間がかかってしまいました。
どんどん効率化していきたいです。
関連記事
【Laravel×Vue】メモアプリ制作の記録①~設計~
【Laravel×Vue】メモアプリ制作の記録②~トップページの作成~
【Laravel×Vue】メモアプリ制作の記録③~フォルダ/タスク機能の実装~
【Laravel×Vue】メモアプリ制作の記録④~テーブルの関連付け~
参考
Vue.jsの書き方実例集(随時追加)※逆引きリファレンス的な
Laravel+Vue.jsでVue.jsの使い方を考えてみたNotSPA
コメントを残す