laravel - 如何在 Laravel 项目中正确安装 Vuetify

Question

我已经努力了几个小时试图在我的 laravel 项目中安装 Vuetify，但我无法使其正常工作，Vuetify 组件运行良好但图标和断点不是，我尝试了一切，现在我有点厌倦了这个，我希望有人能帮助我...

根据我在 app.js 中编写的 vuetify 文档

require('./bootstrap');

import Vue from 'vue';
import Vuex from 'vuex';
import router from './router'

import vuetify from './plugins/vuetify.js' // path to vuetify export

Vue.use(Vuex);

new Vue({
  vuetify,
  router,
}).$mount('#app')

另外，一个 vuetify.js 文件

import '@mdi/font/css/materialdesignicons.css' // Ensure you are using css-loader
import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

export default new Vuetify({
  icons: {
    iconfont: 'mdi', // default - only for display purposes
  },
})

并将 vuetify-loader 添加到我的 webpack.mix.js

const mix = require('laravel-mix');
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

    mix.webpackConfig({
        plugins: [
            new VuetifyLoaderPlugin(),
        ]
    }).sourceMaps();

    mix.disableSuccessNotifications();

首先，有了这个配置，项目甚至无法运行，我得到这个错误:“错误:冲突:多个 Assets 发出相同的文件名 fonts/vendor/@mdi/materialdesignicons-webfont.eot?a32fa1f27abbfa96ff2f79e1ade723d5 "

所以我从 vuetify.js 文件中删除了 import "@mdi/font/css/materialdesignicons.css"，没有错误，但图标不可见。

我从 Toolbar 的文档中获取代码并粘贴到我的项目中，这就是它的样子

这是空工具栏的代码

<template>
  <v-card
    color="grey lighten-4" flat height="200px" tile>
    <v-toolbar dense>
      <v-app-bar-nav-icon></v-app-bar-nav-icon>

      <v-toolbar-title>Title</v-toolbar-title>

      <div class="flex-grow-1"></div>

      <v-btn icon>
        <v-icon>mdi-magnify</v-icon>
      </v-btn>

      <v-btn icon>
        <v-icon>mdi-heart</v-icon>
      </v-btn>

      <v-btn icon>
        <v-icon>mdi-dots-vertical</v-icon>
      </v-btn>
    </v-toolbar>
  </v-card>
</template>

如果我将 vuetify.js 文件中的 iconfont 从 'mdi' 更改为 'mdiSvg'，我会得到一个图标，但其他图标仍然丢失

根据文档，此工具栏应如下所示:

但还不是这样，我什至不能使用像 $vuetify.breakpoint.smAndUp 这样的 vuetify 断点我在控制台中收到未定义的错误

Answer 1

在 Laravel 中使用 Vuetify 与文档略有不同。并取决于 Vuetify 版本以及如何为最后两个版本安装它

Vutify v1.5.x

// /resources/js/app.js file

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

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

Vue.use(Vuetify);  // to access $vuetify inside your Vue components

在 Vuetify v2.0.x 中有点不同

// /resources/js/app.js file

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

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


const app = new Vue({
   vuetify: new Vuetify(),  // to access $vuetify inside your Vue components
});

如果你喜欢，你也可以在 resources/sass 文件夹内的 app.scss 文件中添加 vuetify.min.css 以及 Material 图标，如下所示:

// /resources/sass/app.scss

// Fonts
@import '~@mdi/font/css/materialdesignicons.min.css';

// Vuetify
@import '~vuetify/dist/vuetify.min.css';