使用 Laravel 进行 Vuetify答案

【问题标题】：Vuetify with Laravel使用 Laravel 进行 Vuetify
【发布时间】：2017-11-09 19:28:24
【问题描述】：

我正在开发一个新的Laravel 项目，我想在其中使用Vuetify。

我设法配置并创建了默认布局。这是我的大师，blade.php 布局文件：

<!DOCTYPE html>
<html lang="{{ config('app.locale') }}">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    <link href="{{ asset('css/vuetify.min.css') }}" rel="stylesheet">

    <script>
        window.Laravel = {!! json_encode([
            'csrfToken' => csrf_token(),
        ]) !!};
    </script>
    </head>
    <body>
    <v-app id="app" top-toolbar footer v-cloak>
        <v-navigation-drawer persistent light :mini-variant.sync="mini" v-model="drawer">
            <v-list class="pa-0">
                <v-list-item>
                    <v-list-tile avatar tag="div">
                        <v-list-tile-avatar>
                            <img src="http://ma.twyn.com/bilder/tba.jpg" />
                        </v-list-tile-avatar>
                        <v-list-tile-content>
                            <v-list-tile-title>Tamás Barta</v-list-tile-title>
                        </v-list-tile-content>
                        <v-list-tile-action>
                            <v-btn icon @click.native.stop="mini = !mini">
                                <v-icon>chevron_left</v-icon>
                            </v-btn>
                        </v-list-tile-action>
                    </v-list-tile>
                </v-list-item>
            </v-list>
            <v-list class="pt-0" dense>
            <v-divider></v-divider>
            <v-list-item v-for="item in items" :key="item">
                <v-list-tile>
                    <v-list-tile-action>
                        <v-icon>@{{ item.icon }}</v-icon>
                    </v-list-tile-action>
                    <v-list-tile-content>
                        <v-list-tile-title><a href="/partners">@{{ item.title }}</a></v-list-tile-title>
                    </v-list-tile-content>
                </v-list-tile>
            </v-list-item>
        </v-list>
        </v-navigation-drawer>
        <v-toolbar fixed class="primary darken-4" light>
            <v-toolbar-side-icon light @click.native.stop="drawer = !drawer"></v-toolbar-side-icon>
            <v-toolbar-title>PRM</v-toolbar-title>
        </v-toolbar>
        <main>
            <v-container fluid>
                @yield('content')
            <!--v-router-->
            </v-container>
        </main>
    </v-app>

    <script src="{{ asset('js/app.js') }}"></script>
    <script src="{{ asset('js/prm.js') }}"></script>
    </body>
    </html>

我的问题是如何正确使用这些组件？

我必须为我使用的每个组件制作组件文件吗？

我是否只有一个主 ID #app 的 Vue 实例？

遗憾的是，我在 vuetify 页面旁边找不到任何示例或指南。如果有经验的人可以帮助我朝着正确的方向前进，我会很棒

【问题讨论】：

标签： frontend vuejs2 laravel-5.4 vue-component vuetify.js

【解决方案1】：

您可以通过多种方式在 Laravel 中使用 Vue（w/Vuetify）。您可以在刀片模板中使用它，只要您的 javascript 文件安装到 DOM，该绑定中使用的任何组件/Vue 都可以正常工作。

您还可以使用可设置的 Laravel/Vue 样板，https://laravel.com/docs/5.4/frontend，并使用 Vue 模板文件创建所有标记。

【讨论】：