如何使用 VueJS 增强现有的 Laravel 项目？

Question

我刚刚使用 Laravel 框架完成了我的项目。现在我想将 vue.js 添加到我的项目中以呈现视图而不加载它们。我浏览了一些教程，发现我需要将我的刀片文件转换为 Vue 组件才能实现这一点。但据我所知，这是一个很大的过程，因为某些功能在 VueJS 中不起作用。我不知道该怎么做。请有人指导我如何做到这一点。提前致谢。

Answer 1

1. 将您的基本结构重建为 Vue 模板：

// MyTemplate.vue
<template>
  <div> <!-- keep this single "parent" div in your template -->

    <!-- your Blade layout here -->

  </div>
</template>

<script>
  export default {
    props: [ 'data' ]
  }
</script>

2. 将您的 Vue 模板添加为 app.js 中的全局组件：

// app.js
import Vue from 'vue';
window.Vue = Vue;

Vue.component('my-template', require('./MyTemplate.vue').default);

const app = new Vue({
  el: '#app'
});

3. 在您的 Blade 模板中使用这个新的 Vue 模板，如下所示：

<my-template :data="{{ $onePhpVarThatHoldsAllYourData }}></my-template>

一旦进入 Vue 模板，您将无法在@auth没有 Ajax 请求的情况下返回到 Laravel 方法（例如）或其他数据，因此请确保预先在 Vue 模板中打包您需要的所有数据。您发送的所有数据都将在 Vue 模板中以您分配给它的 prop 的名称作为前缀，在本例中为data。

4. 将您的 Blade 指令转换为 Vue 指令：

循环（例如@foreach）到v-fors：

@foreach ($items as $item)
  <li>{{ $item }}</li>
@endforeach

变成

  <li v-for="item in data.items">{{ item }}</li>

控制结构（例如@if ($something !== $somethingElse) ... @endif）到v-ifs：

<div v-if="data.something !== data.somethingElse">
...
</div>