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

我正在开发一个基于Laravel5.4的大规模应用程序。我想知道在大规模应用中实现fronend的最佳实践是什么？在LaravelBlade上实现所有样式和html呈现，并使用vue进行交互，或者使用blade调用vue组件并实现所有内容是vue？让我们看一些例子：

这是第一种方法：

在laravel刀片中：

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

@extends（'layout'））
@节（“内容”）
@端部

然后，客户搜索组件将是：

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

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

名称
通道
{{customer.name}
导出默认值{
}

第二种方法： 刀片：

@extends（'layout'））
@节（“内容”）
搜寻
名称
通道
{{customer.name}
@端部

和客户索引组件：

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

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

导出默认值{
数据：函数（）{
返回{
名称：“”，
}
},
方法：{
搜索（）{
//从服务器获取数据，更新相关数据模型以便在客户表中使用。。。
},
//其他方法。。。
}
}

第三种可能性： 第三种可能性是尝试使用第二种方法，并对组件进行更深入的研究。例如，使用表组件、表单组件、输入组件、按钮组件。。。

---

我应该使用哪一个组件来节省在fronend上的大量时间并拥有一个集成的前端？

Vue组件应该始终是松散耦合的，以便它们可以在其他地方甚至其他项目中重用

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

---

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

这些是一系列的laracast，可能有助于我将它们全部看了3遍。没有帮助决定。那为什么他们称vue为“前端框架”？假设您要使用twitter引导，其中包括引导样式块？如果您在vue模板元素上使用语义类名称，那么您可以使用您想要的任何UI框架，并仅扩展该框架中的现有类。