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

我仅使用Laravel框架完成了我的项目。现在，我想将vue.js添加到我的项目中以渲染 View 而不加载它们。我遍历了一些教程，发现需要将 Blade 文件转换为Vue组件才能实现。但据我所知，这是一个很大的过程，因为某些功能在VueJS中不起作用。而且我不知道该怎么做。拜托，有人，在这里指导我如何做。提前致谢。

请您参考如下方法:

将您的基本结构重建为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> 

将您的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' 
}); 

在您的Blade模板中使用此新的Vue模板，如下所示:

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

进入Vue模板后，如果没有Ajax请求，您将无法返回Laravel方法(例如 @auth)或获取其他数据，因此请确保将所需的所有数据预先打包在Vue模板中。您发送的所有数据都将在Vue模板中加上您为其分配的prop名称的前缀，在本例中为 data。

将Blade指令转换为Vue指令:

循环(例如 @foreach)到 v-for s:

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