VueJs Laravel 7 - 更好的方式結構項目

Question

我在我的 Laravel 項目中使用 VueJs，我的項目具有這種結構。

我有一個名為“app.blade.php”的刀片文件，其中我將我的 .css 文件和我想要用戶的腳本文件放在其中，包括“app.js”。

在此之后，我有一些其他頁面，例如 a.blade.php、b.blade.php，因為這些頁面我將從 app.blade.php 擴展布局。

但想象一下，在頁面 a.blade.php 上，我想使用一個名為 CarComponent 的組件 vue。

所以在 a.blade.php 我創建了一個這樣的 div

<div id="app>
<CarComponent></CarComponent>
</div>

並想象在我的 b.blade 中我想使用一個名為“StoreComponent”的組件

<div id="app">
<StoreComponent></StoreComponent>
</div>

在我的文件 resources/js/app.js 中，我有這樣的結構示例：

window.Vue = require('vue');

Vue.component('CarComponent',require('./components/CarComponent.vue').default);
Vue.component('StoreComponent',require('./components/StoreComponent.vue').default);

const app= new Vue({
    el: '#app',
});

但有時，我不想在某些頁面上使用 vuejs，所以警告找不到元素“#app”。 有辦法解決這個問題嗎？

Answer 1

我使用以下結構並且效果很好：

在 app.blade.php 上，我有一個像這樣的主 div：

<div class="container" id="app">
   @yield('content')
</div>

所以，基本上，id="app"的div存在於所有視圖中，不管是不是Vue。

然后，我有另一個刀片組件（component.blade.php）就是這樣：

@extends('layouts/app')
@section('content')
<{{ $component }}
    @if(isset($params))
        @foreach($params as $param => $val)
            @if(is_object($val) || is_array($val))
                :{{$param}} = "{{ json_encode($val) }}"
            @else
                {{$param}} = "{{$val}}"
            @endif
        @endforeach
    @endif
/>
@stop

然后在我的控制器上，我執行以下操作：

namespace App\Http\Controllers;

class CarController extends Controller
{
    public function index()
    {

        $params = [
            'foo' => 'bar',
       ];

        return view('component')
            ->with('params', $params)
            ->with('component', 'CarComponent');
    }
}

最后，在我的 CarComponent.vue 上，我可以獲得這樣的參數：

export default {
    props: [
        'foo'
    ],
}

您還將刀片文件保持在最低限度並重復使用大量代碼。