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

Question

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

按照 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"

所以我import "@mdi/font/css/materialdesignicons.css"从 vuetify.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')

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

根据文档，这个工具栏应该是这样的：

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

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

You can also if you like add vuetify.min.css inside app.scss file inside resources/sass folder along with material icons as follows:

// /resources/sass/app.scss

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

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