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

o2gm4chl 于 2023-01-14 发布在 Vue.js

关注(0)|答案(3)|浏览(242)

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

vue.js

来源：https://stackoverflow.com/questions/60000472/how-to-enhance-an-existing-laravel-project-with-vuejs

3条答案

按热度按时间

gudnpqoy1#

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>

1.将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'
});

1.在窥视片模板中使用此新Vue模板，如下所示：

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

一旦进入Vue模板，您将无法返回到Laravel方法（例如@auth），也无法在没有 AJAX 请求的情况下获取其他数据，因此请确保预先将所有需要的数据打包到Vue模板中。您发送的所有数据将在Vue模板中以您分配给它的 prop 名称作为前缀，在本例中为data。
注意，一旦你熟悉了Vue，你可能会开始分离传递给模板的单个数据值，为此，你需要在第1步的props数组中指定额外的属性，例如：

props: ['a', 'b', 'c'],

然后分别传递它们的值

<my-template :a="{{ $a }}" :b="{{ $b }}" :c="{{ $c }}"></my-template>

1.将刀片指令转换为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>

赞(0）回复(0）举报 2023-01-14

nzkunb0c2#

总的来说，正如评论中提到的，将应用从刀片转换到VueJS组件没有捷径可走。无论如何，如果您考虑迁移到VueJS，我建议您进行完整的迁移，而不是部分使用Vue组件。
迁移到VueJS的主要思想是将您在刀片模板中执行的所有逻辑（如foreach、if等）转移到Vue组件，并使用 AJAX 请求获取所有数据（例如，借助axios或natively）。
在这种情况下，您的控制器应该返回页面呈现所需的所有数据，而Vue组件将处理其余的呈现逻辑。
此外，使用vue-router处理舍入并使应用程序表现为SPA也是一个不错的选择。在这种情况下，您应该在应用程序中创建一个通配符路由，该路由将仅返回一个刀片模板。在此模板中，您应该插入将启动VueJS的根标记。其余标记将位于VueJS端。

赞(0）回复(0）举报 2023-01-14

5anewei63#

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