Question

我正在开发一个基于Laravel 5.4的大规模应用程序。我想知道为大规模应用实现fronend的最佳实践是什么？在laravel刀片上实现所有样式和html渲染并使用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>

和customer-table组件：

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

第三种可能性： 第三种可能性是尝试使用第二种方法并更深入地研究组件。例如，使用表格组件，表单组件，输入组件，按钮组件，...... 我应该使用哪一个来花费很多时间在fronend并且还有一个集成的前端？

Answer 1

Vue组件应始终松散耦合，以便在其他地方甚至其他项目中重复使用。

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

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

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

1 个答案: