README

从您的Laravel应用程序配置和返回Vue组件

它是如何工作的？

此包提供辅助函数，可以直接在您的Laravel控制器中配置Vue组件。然后您可以直接在Blade模板中输出它们，无需任何配置。

如果您有一个常见的布局，通常在每页渲染一个组件，您甚至可以直接从控制器返回该组件，模板将包含您的组件进行渲染。

或者，如果您只想有更简单的方式来配置和渲染Vue组件，此包也可以满足您的需求。在模板中不再需要使用json_encode数组。

安装

您可以通过Composer安装此包。它需要Laravel 5.5或更高版本，PHP 7.0或更高版本，并且没有其他依赖项。

composer require mpbarlow/laravel-vue-component-helper

该包使用Laravel自动发现，因此无需进一步配置。但是，您几乎肯定希望发布配置文件

php artisan vendor:publish --provider="Mpbarlow\LaravelVueComponentHelper\ServiceProvider"

这会将配置文件复制到config/vue_helper.php。更多内容稍后介绍。

入门

开始使用此包的最简单方法是使用全局vue()辅助函数。不带参数调用它返回VueComponentManager实例，这是利用包提供功能的主要方式。您还可以在从控制器返回此实例时向函数传递组件名称和属性（与Laravel自己的view()辅助函数类似）——您的指定组件将立即注册到包中，并将渲染默认视图。

示例1：默认组件

作为一个基本的例子，让我们假设您有一个名为UserIndex的Vue组件，该组件显示用户的电子邮件地址和账户创建日期。

// MyController.php

public function index()
{
  $users = User::all()->map(function ($user) {
    return [$user->email => $user->created_at];
  })->toArray();

  return vue('UserIndex', ['users' => $users]);
}

这将设置UserIndex组件为默认组件，设置其属性为提供的数组，并渲染配置中指定的默认视图。但是，我们如何在视图中实际显示我们的组件呢？

该包提供了一些Blade指令来输出组件。让我们看看如何将组件注入到内联模板中

<!-- layout.blade.php -->

<div id="app">
  @vue_component
</div>

简单！在底层，这将转换为

<div id="app">
  <user-index v-bind="{ users: [{ email: date }, ...] }"></user-index>
</div>

如果您正在运行Laravel的默认配置，其中Vue已经通过运行时模板编译器设置到#app，您就可以开始了——无需进一步配置。

如果您不想使用Blade指令，可以直接调用底层函数

{!! vue()->component()->inject() !!}

如果那样更适合您，提供了一个外观

{!! Vue::component()->inject() !!}

示例2：命名组件

当然，您不仅限于一个组件。通过vue()辅助函数返回组件将使其成为默认组件，但您也可以注册任何数量的组件，并在模板中通过名称引用它们

// MyController.php

public function index()
{
  vue()
    ->register('UserIndex', ['users' => $users]);
    ->register('AnotherComponent')

  return view('layout');
}

<!-- layout.blade.php -->

<div id="app">
  @vue_component('UserIndex')
  @vue_component('AnotherComponent')
</div>

示例3：组件挂载

如果您正在使用预编译的Vue组件，并通过渲染函数直接挂载到DOM节点呢？没问题，只需使用@vue_mount指令即可

<!-- layout.blade.php -->

<div id="app"></div>
<script src="js/app.js"></script>
@vue_mount

这将转换为

<!-- layout.blade.php -->

<div id="app"></div>
<script src="js/app.js"></script>
<script>
  new Vue({
    render: function(h) {
      return h('UserIndex', { props: { users: [{ email: date }, ...] } })
    }
  }).$mount('#app')
</script>

你需要记住的是，在尝试挂载之前确保Vue已加载，并且它没有被其他脚本实例化。

就像@vue_component一样，@vue_mount也可以接受一个组件名称，如果你想使用一个命名组件而不是默认组件。然而，它还接受两个其他参数：要挂载到的元素的选择器（即$el），以及将根Vue实例分配到的变量。

例如：

<!-- layout.blade.php -->

<div id="root"></div>
<script src="js/app.js"></script>
@vue_mount('UserIndex', '#root', 'app')

将会得到以下结果：

<!-- layout.blade.php -->

<div id="root"></div>
<script src="js/app.js"></script>
<script>
  var app = new Vue({
    render: function(h) {
      return h('UserIndex', { props: { users: [{ email: date }, ...] } })
    }
  }).$mount('#root')
</script>

示例4：额外的依赖项

如果你想使用的组件加载在Vue中，而该JavaScript文件不是你的正常应用程序包的一部分，怎么办？当使用register()方法配置组件时，你可以传递一个字符串或字符串数组作为第三个参数。这是一个应该在页面上包含的JavaScript列表。默认情况下，这些将通过Laravel Mix的mix()函数传递，所以版本控制会自动处理。

// MyController.php

public function index()
{
	vue()->register('UserIndex', ['users' => $users], 'js/components.js');

	return view('layout');
}

然后，只需使用@vue_dependencies指令在页面上加载这些脚本。

<!-- layout.blade.php -->

<div id="root"></div>
<script src="js/app.js"></script>
@vue_dependencies
@vue_mount

关于使用Vue本身注册组件的说明

由于组件可以通过多种方式注册到Vue中（通过ES6模块的import获取的对象、require()调用、对当前上下文中对象的引用、Webpack的动态import()语句、内联模板字符串），而且这通常在构建步骤之前而不是在浏览器中完成，因此确保你想要使用的组件被Vue知道现在取决于你自己。

如果你使用Webpack，设置代码拆分并使用动态import()异步注册所有组件是一种非常直接的处理方式，否则你可以包含注册组件的小脚本，然后按照上述方式将它们作为依赖项包含。

API

辅助函数

vue() : VueComponentManager

使用无参数的辅助函数获取该包提供的核心服务实例。

当然，你也可以通过外观Vue::访问它的方法，或者在你的控制器方法中类型提示来自容器的自动注入，或者通过名称使用app(‘Mpbarlow\LaravelVueComponentHelper\VueComponentManager’)获取它。如果你真的不喜欢单例，没有任何阻止你实例化VueComponentManager，只是你将无法使用Blade指令，因为它们会回钩到容器中已存在的实例。

vue(string $componentName, array $props = [], ?string $template = null, array $templateData = []) : \Illuminate\View\View

如前所示，辅助函数也可以接受多个参数。使用超过零个参数调用该函数将导致Blade模板被渲染，因此通常在以这种方式使用时从控制器返回它。

string $componentName：当指令/渲染方法未提供名称时渲染的组件名称。

array $props = []：要传递给默认组件的props。

?string $template = null：要渲染的Blade模板的名称。此值直接传递给Laravel的view()函数。如果没有提供值，则使用在配置中指定的默认模板。

array $templateData = []：要传递给Blade模板的数据。同样，这也直接通过Laravel的view()函数传递。

VueComponentManager

这个包提供的大多数功能都可以在这个类中找到。它有以下公共API

register(string $componentName, array $props = [], array|string $from = []) : self

将 Vue 组件注册到管理器，以便它可以渲染到视图中。

string $componentName：这应该与在 JavaScript 中注册组件时使用的名称完全匹配。如果渲染到模板中，它将自动转换为短横线命名法。

array $props = []：传递给组件的属性。

array|string $from = []：组件所需的 JavaScript 文件路径的字符串或数组。除非在配置中另有指定，否则这些文件将通过 Laravel Mix 的 mix() 函数传递以解析版本哈希等。

registerDefault(string $componentName, array $props = [], array|string $from = []) : self

与 register 相同，但还将组件设置为默认。

prepareTemplate(?string $template = null, array $templateData = []) : self

设置模板路径和要传递给 Laravel 的 view() 函数的数据，如果使用 render()。

render(string $componentName, array $props = []) : \Illuminate\View\View

将提供的组件注册为默认组件，然后渲染默认或先前配置的 Blade 模板。

component(string $componentName = '') : VueComponent

返回与提供名称匹配的 VueComponent 实例。如果没有提供名称，则返回默认组件。

dependencies() : DependencyRenderer

返回一个 DependencyRenderer 实例，可用于将 JavaScript 依赖项作为 <script> 标签输出。

VueComponent

此类封装了一个已注册的组件，并可用于在 HTML 模板中渲染或挂载组件。

getName() : string

返回组件名称。

getTagName() : string

以短横线命名法返回组件名称，适合用作自定义 HTML 元素。

getProps() : ?array

返回组件的属性。

getPropsJson(bool $escape = false) : string

获取组件的属性作为 JSON 字符串。

bool $escape = false：如果为 true，则在返回之前将字符串通过 htmlentities() 转义。如果您想在 HTML 元素中输出字符串，则需要这样做。

inject() : ComponentInjector

返回此组件的注入器，可用于将组件作为自定义 HTML 标签插入。这是 @vue_component 指令使用的方法。

mount(?string $to = null , ?string $var = null) : ComponentMounter

返回此组件的挂载器，可用于通过 Vue 构造函数的渲染函数插入组件。这是 @vue_mount 指令使用的方法。

?string $to = null：根 Vue 实例应挂载到的 DOM 元素的选择器。如果没有提供，则使用配置中的默认值。

?string $var = null：根 Vue 实例应分配到的 JavaScript 变量名称。如果没有提供，则使用配置中的默认值。如果使用 null，则根实例不会分配给任何变量。

ComponentInjector，ComponentMounter 和 DependencyRenderer

这些类每个只实现了一个方法：render()。 __toString() 也会调用此函数，因此直接在模板中输出对象就足以执行渲染。

配置

配置文件提供了一些选项，以及用于简化控制器代码的默认值。

[
    /*
    |-----------------------------------------------------
    | Default Blade template
    |-----------------------------------------------------
    |
    | Specify the Blade template to render (as you would pass to the view()
    | helper or View::make()) when no explicit template is supplied.
    | e.g. 'layout' would refer to 'resources/views/layout.blade.php'
    |
    */
    'default_template' => 'layout',

    /*
    |-----------------------------------------------------
    | Default $mount element
    |-----------------------------------------------------
    |
    | The selector for the DOM element that a component should be mounted to
    | if none is supplied.
    |
    */
    'default_mount_el' => '#app',

    /*
    |-----------------------------------------------------
    | Default variable assignment
    |-----------------------------------------------------
    |
    | The default JavaScript variable that the new Vue instance is assigned to.
    | Leave null if you don't want to assign a variable.
    |
    */
    'default_variable' => null,

    /*
    |-----------------------------------------------------
    | Use Laravel Mix for dependencies
    |-----------------------------------------------------
    |
    | If true, any registered dependencies for a component will be wrapped in
    | mix() calls.
    |
    */
    'use_mix' => true,

    /*
    |-----------------------------------------------------
    | Vue global
    |-----------------------------------------------------
    |
    | The name of the global Vue object (i.e. 'new Vue(...)')
    |
    */
    'vue_global' => 'Vue',

    /*
    |-----------------------------------------------------
    | Additional configuration
    |-----------------------------------------------------
    |
    | Additional configuration data to pass into the Vue constructor when
    | mounting components. If you need to register a Vuex store or Vue router,
    | this is the place to specify it.
    | e.g. to specify a Vuex store called myStore, set this to
    | ['store' => 'myStore']
    |
    | This only supports one-dimensional arrays for now, so if you need nested
    | objects or functions, you'll need to type them out as a string.
    |
    */
    'additional_config' => [],
];

运行单元测试

./vendor/bin/phpunit