如何解决如何在带有喷射流惯性的Laravel 8中安装Vuefity?
我正在尝试在最新的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>
有人可以帮助我找到错误的地方吗? 预先谢谢你
Valerio
解决方法
新鲜的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)
和
vuetify: new Vuetify(),
在“新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
,目前 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:安装惯性
-
现在运行 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),}).$mount(app);
-
现在运行 npm run dev
此时您的 vuetify 将起作用!
要检查带有 inertia js 的 vuetify 是否正常工作,请遵循:
-
转到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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。