如何在具有喷射流惯性的 Laravel 8 中安装 Vuetify?

我正在尝试在最新的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)

Mywebpack.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');

该应用程序.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);

和欢迎之刃.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>

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

瓦莱里奥

新鲜拉拉维尔 8.12 + 喷射流 + 惯性 + 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 labrory 的代码
在/resources/js/Pages/Dashboard.vue 中初始化这个 vue-component 就像<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和其他配置您可以自行配置。

屏幕截图示例导航抽屉

屏幕截图示例导航抽屉二

目前 Vuetify 不适用于 vue 3，所以要安装 vuetify，你必须使用 vue 2。为此：我们可以安装 Vue 2 附带的 Jetstream 2.1。我在下面描述了安装过程：

优酷视频：https://youtu.be/V8_yLfNhg2I

安装拉拉维尔

composer create-project laravel/laravel project_name

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

"拉拉维尔/喷射流"： "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", 
},

现在运行作曲家更新
现在运行php 工匠喷射流：安装惯性
现在运行npm 安装
现在运行npm 安装 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 运行开发

此时此刻，您的 vuetify 将起作用！

要检查带有惯性的vuetifyjs 是否正常工作，请遵循：

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

将以下代码添加到test.vue

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

现在运行npm 运行开发

现在转到路由/网络.php并添加

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

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

Vuetify 现在有一个 Vue 3 分支(在撰写本文时仍处于测试阶段) 关于与顺风冲突的观点仍然存在，尽管问题主要体现在文件大小(css)方面无论如何，要在Laravel(9)和惯性Jetstream的安装中正常工作，您需要添加vuetify

npm install vuetify@^3.0.7 --save

然后编辑resources/js/app.js

加入：

// Vuetify
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
const vuetify = createVuetify({
components,
directives,
})

并在同一文件中修改创建惯性应用程序功能设置，以便 Vue 使用 Vuetify

createInertiaApp({
title: (title) => `${title} - ${appName}`,
resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
setup({ el, app, props, plugin }) {
return createApp({ render: () => h(app, props) })
...
.use(vuetify)
...
},
});

然后，您将能够使用 Vuetify 组件。您可能希望设置自己的颜色。有两个选项 SASS 或 JavaScript

下面是 Javascript 选项的示例

const vuetify = createVuetify({
theme: {
themes: {
light: {
dark: false,
colors: {
primary:  "#415e96",
secondary: "#b89acc"
}
},
},
},
components,
directives,
}

)

更多关于这方面的信息

这里这是一篇(未经我测试的)关于消除顺风和 Vuetify 之间碰撞的文章

相关内容

最新更新

热门标签：