Laravel - 将 Blade 解析为 Vue 组件答案

【问题标题】：Laravel - Parse Blade to Vue ComponentLaravel - 将 Blade 解析为 Vue 组件
【发布时间】：2020-07-02 01:17:13
【问题描述】：

Laravel 身份验证脚手架为其余视图创建布局。

问题很简单：如何把这个布局转成vue组件？

刀片文件。我需要转换为 Vue。

<!doctype html>
    <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <title>{{ config('app.name', 'Laravel') }}</title>
        <script src="{{ asset('js/app.js') }}" defer></script>
        <link rel="dns-prefetch" href="//fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
        <link href=’https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' rel=”stylesheet”>
        <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    </head>
    <body>
        <div id="app">
            @yield('content')
        </div>
    </body>
    </html>

【问题讨论】：

解析是什么意思？
也许我需要更具体的。我需要将刀片布局转换为 vue 组件。
创建一个名为Login.vue 的组件并将blade 的标记放入该组件的<template> 部分。在刀片中使用 <login> 组件。

标签： laravel vue.js

【解决方案1】：

我找到了解决方案。我将创建一个基本的 Vue 布局。然后当页面加载时，我重定向到登录组件并加载基本布局（作为本地组件导入）。然后当重定向到其他页面（例如带有抽屉的组件）时，我将加载此组件，但也会加载基本布局。

为了帮助做到这一点，我将使用Vue slots。我知道 here 是如何工作的。视频是西班牙语的，但我想我们可以理解。

【讨论】：

【解决方案2】：

根据文档，这包含在 Laravel 5.7 中

您生成脚手架并发布组件：

composer require laravel/ui "^1.0" --dev

php artisan ui vue --auth

它将帮助您开始使用示例组件，因此请了解如何从刀片模板中调用它。

https://laravel.com/docs/6.x/authentication#included-routing

https://laravel.com/docs/6.x/authentication#included-views

【讨论】：

但是脚手架在 php (blade) 中创建了基本布局。我需要在所有应用程序中使用（¿ 或在 vue 中转换？）因为在 head 标签中有 csrf 和其他东西。问题是我需要重定向到刀片内的抽屉组件，但 vue 路由器无法调用刀片文件。