반응형
라라벨과 함께 뷔에티파
나는 새로운 일을 하고 있다.Laravel프로젝트, 내가 Vuetify를 사용하고 싶은 곳.
나는 가까스로 기본 레이아웃을 구성하고 만들 수 있었다.이쪽은 내 주인 블레이드야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 인스턴스가 하나뿐입니까?
슬프게도 나는 부피 페이지 옆에 있는 어떤 예나 지침도 찾을 수 없었다.경험이 있는 누군가가 나를 올바른 방향으로 밀어준다면 나는 멋질 것이다.
Laravel에서 Vue(w/Vuetify)를 사용할 수 있는 방법은 여러 가지가 있다.Javascript 파일이 DOM에 마운트되어 있는 한 블레이드 템플릿 내에서 사용할 수 있는 모든 구성 요소/Vue는 정상적으로 작동한다.
https://laravel.com/docs/5.4/frontend 를 설치하고 Vue 템플릿 파일로 모든 마크업을 만들 수 있는 Laravel/Vue 보일러를 사용할 수도 있다.
참조URL: https://stackoverflow.com/questions/44429666/vuetify-with-laravel
반응형
'programing' 카테고리의 다른 글
| Quasar Framework에서 환경 변수를 가져오는 방법 (0) | 2022.03.25 |
|---|---|
| rxjs 단위로 구독당 한 번 관측 가능한 파이프에서 초기화 로직을 수행하는 방법 (0) | 2022.03.25 |
| Python 패키지에 버전을 포함시키는 표준 방법? (0) | 2022.03.25 |
| PDF를 텍스트로 변환하기 위한 Python 모듈 (0) | 2022.03.25 |
| 반응 useState는 여기서 기본값을 허용하지 않는 것 같으십니까? (0) | 2022.03.25 |