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

那么 customer-search 组件将是：

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

第二种方法： 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

和customer-index分量：

<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 组件中使用尽可能少的标记，这样它们就可以移植并且可以重复使用而无需你编辑它们。

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

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

Best practice for implementing frontend using laravel and vue

frontend

vue.js

laravel-5

vuejs2