7

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

4

3 回答 3

8
  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. 在 Blade 模板中使用这个新的 Vue 模板，如下所示：
<my-template :data="{{ $onePhpVarThatHoldsAllYourData }}></my-template>

一旦进入 Vue 模板，您将无法返回您的 Laravel 方法（例如@auth）或在没有 Ajax 请求的情况下获取其他数据，因此请确保您预先将所有需要的数据打包到 Vue 模板中。您发送的所有数据都将在 Vue 模板中以您分配给它的道具的名称作为前缀，在本例中为data.

  1. 将 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>
于 2020-01-31T15:43:07.073 回答
1

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

第 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

希望这可以帮助！

于 2020-01-31T14:55:25.413 回答
1

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

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

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

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

于 2020-01-31T09:34:50.330 回答