用 Laravel 验证
Vuetify with Laravel
我正在开发一个新的 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 页面旁边找不到任何示例或指南。
如果有经验的人能给我一个正确方向的推动,我会很棒
您可以通过多种方式在 Laravel 中使用 Vue (w/Vuetify)。您可以在 blade 模板中使用它,只要您的 javascript 文件安装到 DOM,在该绑定中使用的任何 components/Vue 都可以正常工作。
您还可以使用可设置的 Laravel/Vue 样板 https://laravel.com/docs/5.4/frontend ,并使用 Vue 模板文件创建所有标记。
我正在开发一个新的 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 页面旁边找不到任何示例或指南。 如果有经验的人能给我一个正确方向的推动,我会很棒
您可以通过多种方式在 Laravel 中使用 Vue (w/Vuetify)。您可以在 blade 模板中使用它,只要您的 javascript 文件安装到 DOM,在该绑定中使用的任何 components/Vue 都可以正常工作。
您还可以使用可设置的 Laravel/Vue 样板 https://laravel.com/docs/5.4/frontend ,并使用 Vue 模板文件创建所有标记。