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

Question

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

Answer 1

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

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

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

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

Answer 2

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

第 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

希望对您有所帮助！

Answer 3

将您的基本结构重建为 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 模板中以您分配给它的 prop 的名称作为前缀，在本例中为 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>

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

How to enhance an existing Laravel project with VueJS?

laravel

vue.js

laravel-blade

vue-component

vue-render-function