时间戳

首页 > 解决方案 > VueJs Laravel 7 - 更好的方式结构项目

php - VueJs Laravel 7 - 更好的方式结构项目

问题描述

我在我的 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”。有办法解决这个问题吗？

标签： phplaravelvue.js

解决方案

我使用以下结构，效果很好：

在 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'
    ],
}

您还可以将刀片文件保持在最低限度并重复使用大量代码。

推荐阅读