vue.js - 如何使用VueJS增强现有的Laravel项目？

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

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