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

【问题标题】：How to enhance an existing Laravel project with VueJS?如何使用 VueJS 增强现有的 Laravel 项目？
【发布时间】：2020-05-16 22:06:55
【问题描述】：

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

【问题讨论】：

我真的看不出有什么捷径可以在短短几天内完全转换您的项目——这取决于您项目的大小。但是，您可以在 Vue 组件中转换您的刀片文件的某些部分并将它们呈现在 .balde 文件中。 PS。你可能在你的刀片文件中使用了 jQuery，所以这也是你可能不想使用 Vue 重做相同的工作。
感谢您的回复。请让我知道最好的方法是什么？使用 AngularJS 还是 VueJS？请建议我一个很好的教程来做到这一点。

标签： laravel vue.js vue-component laravel-blade vue-render-function

【解决方案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 模板，您将无法返回您的 Laravel 方法（例如 @auth）或在没有 Ajax 请求的情况下获取其他数据，因此请确保将您需要的所有数据打包到 Vue 模板中在前面。您发送的所有数据都将在 Vue 模板中以您分配给它的道具名称作为前缀，在本例中为 data。

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

【讨论】：

非常感谢您的详细回答，这将对我的工作有很大帮助。

【解决方案2】：

一般来说，正如在 cmets 中已经提到的，将应用程序从刀片转换为 VueJS 组件没有捷径可走。无论如何，如果您考虑迁移到 VueJS，我建议您进行完全迁移，而不是部分使用 Vue 组件。

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

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

此外，使用vue-router 处理舍入并使您的应用程序表现得像SPA 是一个不错的选择。在这种情况下，您应该在应用程序中创建一个只返回一个刀片模板的通配符路由。在此模板中，您应该插入将启动 VueJS 的根标记。其余的将在 VueJS 方面。

【讨论】：

非常感谢您的回答。你能给我推荐一些好的教程吗？
另外我想知道最好的方法是什么？使用 AngularJS 还是 VueJS？
我想你可以看看这些课程 - laracasts.com/skills/vue。至于 Angular.. 我个人不知道，但它似乎比 VueJS 更难学习，特别是如果你以前不知道任何前端框架。无论如何，这还取决于您的应用程序有多复杂
非常感谢。让我完成本教程并尝试使用 Vue。

【解决方案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

希望这会有所帮助！

【讨论】：