【Laravel×Vue】メモアプリ制作の記録②～トップページの作成～

はじめに

この記事では前回の設計を基にさっそくプロジェクトを作成していきます。

目的(ゴール)/今回試したいこと

1.プロジェクト作成

2.トップページの作成

環境に関して

Laravel 6.8

※5.8はセキュリティ修正が行われないとのことなので6.8を採用。(教えてくださったやんばるさんありがとうございました。)　参考

PHP 7.3

Windows/XAMPP/MySQL

1.プロジェクトの作成

①以前作成したこちらを基にVue.js実装。

Laravelでアプリ制作する際にしておきたいこと(モデル追加～Vue.js/Sassの実装まで)

【Laravel×Vue.js】装飾一切なしの汎用テンプレート～認証周りからAxiosまで～

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を呼び出す際に起きた

import Task from './components/Task.vue'
~~省略
const app = new Vue({
  el: '#app',
  components: {
    Folder,
    Task
  },
})

<div id="app">
  <Folder />
  <Task />
</div>

表示されなかった。

解決策：親コンポーネント(1つのコンポーネント)にまとめる

<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

【Vue】単一ファイルコンポーネントの命名規則まとめ【ファイル名から記法まで】

[Vue.js] htmlタグと重複するコンポーネント名の命名規則をどうするか