Question

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

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

将您的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）：

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

Answer 2

通常，正如注释中已经提到的那样，没有将您的应用程序从刀片转换为VueJS组件的捷径。无论如何，如果您考虑迁移到VueJS，我建议您进行完整迁移，而不是部分使用Vue组件。

迁移到VueJS的主要思想是将您在刀片模板中所做的所有逻辑（如foreach的，if的等）转移到Vue组件，并使用AJAX请求（例如借助axios或本机获取所有数据））。

在这种情况下，您的控制器应返回页面渲染所需的所有数据，而Vue组件将负责其余的渲染逻辑。

此外，使用vue-router处理舍入并使您的应用程序具有SPA的功能是一个不错的选择。在这种情况下，您应该在应用程序中创建一个通配符路由，该通配符路由将仅返回一个刀片模板。在此模板的内部，您应该插入将启动VueJS的根标记。其余的将在VueJS端。

Answer 3

如果您打算迁移整个应用程序，则从身份验证开始。

第1部分： https://codebriefly.com/laravel-jwt-authentication-vue-ja-spa-part-1/

第2部分 https://codebriefly.com/laravel-jwt-authentication-vue-js-spa-part-2/

本教程过去帮助我入门。之后，将您的代码分成多个组件。

如果您想先学习基础知识，那么可以继续阅读本教程，我发现这很有用。 https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQcYgjhBoeQH7wiAyZNrYa

希望这会有所帮助！

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

3 个答案: