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

Question

我一直在努力尝试在laravel项目中安装Vuetify，但我无法使其正常工作，Vuetify组件运行良好，但是Icon和Breakpoint却不行，我尝试了所有操作，现在我对此感到有点厌倦，希望有人能帮助我...

按照vuetify文档，我在app.js中写了这个

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();

首先，使用这种配置，项目甚至都不会运行，我得到了这个错误："Error: Conflict: Multiple assets emit to the same filename fonts/vendor/@mdi/materialdesignicons-webfont.eot?a32fa1f27abbfa96ff2f79e1ade723d5"

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

我从工具栏的文档中获取了代码并将其粘贴到我的项目中，这就是它的样子

这是空工具栏的代码

<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>

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

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

但这还不是，我什至无法使用vuetify断点，例如$vuetify.breakpoint.smAndUp，在控制台中出现未定义的错误

Answer 1

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

验证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
});

如果您喜欢将vuetify.min.css添加到resources / sass文件夹内的app.scss文件中，还可以如下所示添加材料图标：

// /resources/sass/app.scss

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

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