个人中心
gpt4 book ai didi

laravel - 如何在带有jetstream-inertia的Laravel 8中安装Vuetify？

转载 作者：行者123 更新时间：2023-12-03 15:27:17 26 4
gpt4 key购买 nike

我正在尝试在最新的Laravel版本(8)上安装Vuetify，但我做不到。即使控制台没有显示任何错误，它似乎也不起作用。
那是我的资源/插件/vuetify.js 

import Vue from 'vue'
// import Vuetify from 'vuetify'
import Vuetify from 'vuetify/lib'
// import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify)

const opts = {}

export default new Vuetify(opts)
我的 webpack.mix.js : 
const mix = require('laravel-mix')
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')
mix
.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
    require('postcss-import'),
    require('tailwindcss'),
])
.webpackConfig({
  plugins: [
    new VuetifyLoaderPlugin()
  ],
})
.browserSync('tb8.test');
app.js 
import PortalVue from 'portal-vue';

Vue.use(InertiaApp);
Vue.use(InertiaForm);
Vue.use(PortalVue);
Vue.use(vuetify);

const app = document.getElementById('app');

new Vue({
   vuetify,
   render: (h) =>
      h(InertiaApp, {
        props: {
            initialPage: JSON.parse(app.dataset.page),
            resolveComponent: (name) => require(`./Pages/${name}`).default,
        },
    }),
}).$mount(app);
和 welcome.blade.php 
    <!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">

   
        <style>
            body {
                font-family: 'Nunito';
            }
        </style>
    </head>
    <body class="antialiased">
        <div class="relative flex items-top justify-center min-h-screen bg-gray-100 dark:bg-gray-900 sm:items-center sm:pt-0">
            @if (Route::has('login'))
                <div class="hidden fixed top-0 right-0 px-6 py-4 sm:block">
                    @auth
                        <a href="{{ url('/dashboard') }}" class="text-sm text-gray-700 underline">Dashboard</a>
                    @else
                        <a href="{{ route('login') }}" class="text-sm text-gray-700 underline">Login</a>

                        @if (Route::has('register'))
                            <a href="{{ route('register') }}" class="ml-4 text-sm text-gray-700 underline">Register</a>
                        @endif
                    @endif
                </div>
            @endif

            <v-app>
                <v-main>
                    Hello World
                </v-main>
            </v-app>
        </div>
    </body>
</html>
谁能帮助我找出错误所在？
先感谢您
瓦列里奥

最佳答案

新鲜的Laravel 8.12 + Jetstream +惯性+ VueJs + Vuetify

  • 在/resources/views/app.blade.php中将样式字符串添加到标题中
    • <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
  • 添加到/resources/js/app.js 
    • import Vuetify from 'vuetify';
    import 'vuetify/dist/vuetify.min.css';
    Vue.use(Vuetify)
    和
    'new Vue({')之后的 vuetify: new Vuetify(),像这样: 
    require('./bootstrap');

    import Vue from 'vue';
    import Vuetify from 'vuetify';

    import { InertiaApp } from '@inertiajs/inertia-vue';
    import { InertiaForm } from 'laravel-jetstream';
    import PortalVue from 'portal-vue';

    import 'vuetify/dist/vuetify.min.css';

    Vue.mixin({ methods: { route } });
    Vue.use(InertiaApp);
    Vue.use(InertiaForm);
    Vue.use(PortalVue);
    Vue.use(Vuetify)

    const app = document.getElementById('app');

    new Vue({
        vuetify: new Vuetify(),
        render: (h) =>
            h(InertiaApp, {
                props: {
                    initialPage: JSON.parse(app.dataset.page),
                    resolveComponent: (name) => require(`./Pages/${name}`).default,
                },
            }),
    }).$mount(app);
  • 之后，例如，您可以创建如下的vuetify组件:
    带有Vuetify库中代码的/resources/js/Components/NavigationDrawers.vue
  • 在/resources/js/Pages/Dashboard.vue中初始化此vue组件<navigation-drawers/>有电话import NavigationDrawers from '@/Components/NavigationDrawers'和NavigationDrawers用<script>

    • 例子: 
    <template>
        <app-layout>
            <navigation-drawers/>

            ....
            ....
        </app-layout>
    </template>

    <script>
        import NavigationDrawers from '@/Components/NavigationDrawers'

        import AppLayout from '@/Layouts/AppLayout'
        import Welcome from '@/Jetstream/Welcome'

        export default {
            components: {
                AppLayout,
                Welcome,
                NavigationDrawers,
            },
        }
    </script>
    它可以帮助您设置对项目的验证。
    Sass和其他配置可以自行配置。
    a screenshot example Navigation Drawer
    a screenshot example Navigation Drawer two

    关于laravel - 如何在带有jetstream-inertia的Laravel 8中安装Vuetify？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64098183/

    26 4 0
    文章推荐： r - 如何在R中将字符串拆分为规则间隔？
    文章推荐： C#:为什么范围的上限是互斥的？
    文章推荐： Android imageview 色调
    文章推荐： string - 删除多余的字符串而不循环
    行者123
    个人简介

    我是一名优秀的程序员,十分优秀！

    滴滴打车优惠券免费领取
    滴滴打车优惠券
    全站热门文章
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com