laravelとvueを使用してフロントエンドを実装するためのベストプラクティス

Question

私はLaravel 5.4で大規模なアプリケーションベースを開発しています。私は大規模なアプリケーションのためのフロントエンドを実装するためのベストプラクティスは何ですか？すべてのスタイリングとhtmlレンダリングのためのlaravelブレードを実装し、対話性のためにvueを使用するか、またはブレードを使用してvueコンポーネントを呼び出してすべてのものを実装することはvueですか？いくつかの例を見てみましょう：

は、これが最初のアプローチです：laravelブレードで

：

@extends('layout') 
@section('content') 
    <customer-search></customer-search> 
    <customer-table></customer-table> 
@endsection 

、顧客-検索コンポーネントは次のようになります。

<template> 
    <div> 
    <form action="/customer" method="GET"> 
     <input type="text" name="name" @input="updateValue($event.target.value)" :value="name" /> 
     <submit @click="search">Search</button> 
    </form> 
    </div> 
</template> 
<script> 
    export default { 
    data: function() { 
     return { 
     name: '', 
     } 
    }, 
    methods: { 
     search() { 
     // Get data from server, update related data model for using in customer table, ... 
     } 
    } 
    } 
</script> 

と顧客テーブルコンポーネント：

<template> 
    <div> 
    <table> 
     <thead> 
     <tr> 
      <th>Name</th> 
      <th>Access</th> 
     </tr> 
     </thead> 
     <tbody> 
     <tr v-for="customer in customers"> 
      <td>{{ customer.name }}</td> 
      <td><a href="#">Link</a></td> 
     </tr> 
     </tbody> 
    </table> 
    </div> 
</template> 
<script> 
    export default { 

    } 
</script> 

第二のアプローチ： ブレード：

@extends('layout') 
@section('content') 
    <customer-index> 
    <form action="/customer" method="GET"> 
     <input type="text" name="name" @input="updateValue($event.target.value)" :value="name" /> 
     <submit @click="search">Search</button> 
    </form> 

    <table> 
     <thead> 
     <tr> 
      <th>Name</th> 
      <th>Access</th> 
     </tr> 
     </thead> 
     <tbody> 
     <tr v-for="customer in customers"> 
      <td>{{ customer.name }}</td> 
      <td><a href="#">Link</a></td> 
     </tr> 
     </tbody> 
    </table> 
    </customer-index> 
@endsection 

と顧客インデックスコンポーネント：

<tempalte> 
    <div> 
    <slot></slot> 
    </div> 
</template> 
<script> 
    export default { 
    data: function() { 
     return { 
     name: '', 
     } 
    }, 
    methods: { 
     search() { 
     // Get data from server, update related data model for using in customer table, ... 
     }, 
     // Other methods, ... 
    } 
    } 
</script> 

第三の可能性： 第三の可能性は、第二のアプローチを使用して試してみて、深さの多くを行くですコンポーネント上。たとえば、テーブル用のコンポーネント、フォーム用のコンポーネント、入力用のコンポーネント、ボタン用のコンポーネントなどを使用します。 フロントローに多くの時間を費やし、フロントエンドを統合するのにどちらを使うべきですか？

Answer 1

ビューコンポーネントは、他の場所や他のプロジェクトでも再利用できるように、常に疎結合されている必要があります。

vueコンポーネントで可能な最小限のマークアップを使用して、ポータブルであり、編集することなく再利用できるようにする必要があります。

明らかにこれは意見に基づく質問ですが、上記は少なくとも私の意見では、ベストプラクティスです。