如何在 Laravel 8 中使用 jetstream-inertia 安装 Vuetify？答案

【问题标题】：How to install Vuetify in Laravel 8 with jetstream-inertia?如何在 Laravel 8 中使用 jetstream-inertia 安装 Vuetify？
【发布时间】：2021-06-06 19:38:59
【问题描述】：

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

那是我的 resource/plugins/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>

谁能帮我找出错误在哪里？提前谢谢你

瓦莱里奥

【问题讨论】：

我发了一个教程：medium.com/@horaceh/…

标签： laravel vuetify.js jetstream

【解决方案1】：

新鲜的 Laravel 8.12 + Jetstream + Inertia + 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)

和 vuetify: new Vuetify(), 在 'new Vue({' 之后是这样的：

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 组件： /resources/js/Components/NavigationDrawers.vue 来自 Vuetify 实验室的代码
在 /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>

它可以帮助您为您的项目设置 vuetify。 Sass 和其他配置你可以自己配置。

a screenshot example Navigation Drawer

a screenshot example Navigation Drawer two

【讨论】：

@Shturmavik 你绝对是绅士和学者，谢谢
太棒了。正是我需要的！
Laravel Jetstream 带有 tailwindcss。 Afaik UI 框架（例如 tailwindcss 和 vuetify）并不意味着混合使用。如何解决这个问题？例如，有一个项目 jetstrap 在 Laravel Jetstream 项目中用 bootstrap 4 替换 tailwindcss。我希望人们应该有类似的东西来切换到 vuetify。关于这个的问题是stackoverflow.com/questions/56551434/…。对您将如何进行有任何想法？
不再工作了 :( jetstream / intertia 现在安装 vue v3+ 并猜猜是什么...vuetify 不能与 v3 一起工作！
继续我的最后一个，如果你很绝望，那么你可以安装一个稍旧的 Jetstream 版本：composer require laravel/jetstream:v2.1

【解决方案2】：

目前 Vuetify 不适用于 vue 3，因此要安装 vuetify，您必须使用 vue 2。这样做：我们可以安装 vue 2 自带的 jetstream 2.1。我在下面描述了安装过程：

Youtube 视频：https://youtu.be/V8_yLfNhg2I

安装 laravel

 composer create-project laravel/laravel project_name

现在转到 composer.json 文件并在 require:{} 中添加一行，composer 文件的其余部分应该相同。

"laravel/jetstream": "2.1",

添加 composer.json 的 "require" 部分后将如下所示：

 "require": {
            "php": "^7.3|^8.0",
            "fideloper/proxy": "^4.4",
            "fruitcake/laravel-cors": "^2.0",
            "guzzlehttp/guzzle": "^7.0.1",
            "laravel/framework": "^8.40",
            "laravel/tinker": "^2.5",
            "laravel/jetstream": "2.1", 
          },

现在运行 composer update
现在运行 php artisan jetstream:install惯性
现在运行 npm install
现在运行 npm install vuetify

转到 resources/css/app.css 并添加以下内容

 @import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900');

 @import url('https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css');

 @import "vuetify/dist/vuetify.min.css";

现在转到 resources/js/app.js 并添加以下代码：

require('./bootstrap');

// Import modules...

import Vue from 'vue';
import { App as InertiaApp, plugin as InertiaPlugin } from '@inertiajs/inertia-vue';
import PortalVue from 'portal-vue';
//add these two line
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

Vue.mixin({ methods: { route } });
Vue.use(InertiaPlugin);
Vue.use(PortalVue);
//also add this line
Vue.use(Vuetify);

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

new Vue({ 
     //finally add this line 
    vuetify: new Vuetify(), 
render: (h) =>
    h(InertiaApp, {
        props: {
            initialPage: JSON.parse(app.dataset.page),
            resolveComponent: (name) => require(`./Pages/${name}`).default,
        },
    }),
    }).$mount(app);

现在运行 npm run dev

此时你的 vuetify 就可以工作了！

要检查 vuetify 与 inertia js 是否正常工作，请遵循：

转到 resources/js/Pages 并创建新文件名 test.vue

将以下代码添加到 test.vue

 <template>
   <v-app>
     <v-container>
         <v-btn>Click Me!</v-btn>
      </v-container>
   </v-app>
 </template>

现在运行 npm run dev

现在转到 route/web.php 并添加

   Route::get('/', function () {
   return Inertia::render('test');
 });

现在 php artisan serve 在浏览器中运行。并且不要忘记将迁移和添加数据库添加到 .env

【讨论】：

你好比纳亚。你可以租用吗？你可以在这里联系我，或者推特@ijpatricio
全局 scss 怎么样，所以每个组件都可以访问全局变量？谢谢
vuetify 对此不起作用。它确实显示，但课程不在那里。我不能添加像“white--text”这样的类
如何在 vuetify 中自动重新加载更改？