laravel-5 - 使用 Laravel 和 Vue 实现前端的最佳实践

Question

我正在开发一个基于 Laravel 5.4 的大型应用程序。我想知道实现大规模应用程序前端的最佳实践是什么？在 laravel Blade 上实现所有样式和 html 渲染并使用 vue 进行交互或使用blade 调用 vue 组件并实现所有内容是 vue？让我们看一些例子:

这是第一种方法:

在 laravel Blade 中:

@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>

第二种方法: Blade :

@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 组件应该始终是松散耦合的，这样它们就可以在其他地方甚至其他项目中重用。

您应该在 vue 组件中使用尽可能少的标记，以便它们可移植并且可以重用，而无需您编辑它们。

显然这是一个基于意见的问题，但至少在我看来，以上是最佳实践。