如何在 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
  },
})

并在我的 webpack.mix.js 中添加了 vuetify-loader

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"，没有出现错误，但是图标不可见。

我从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的断点（如$vuetify.breakpoint.smAndUp），控制台显示未定义错误。

- H3lltronik

Answer 1

在 Laravel 中使用 Vuetify 与文档略有不同，并且取决于 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';

- Manson Xasthur

---

你好，感谢你的帮助。我在导入 Material Icons 时遇到了问题，它显示“错误：冲突：多个资产发出到相同的文件名 fonts/vendor/@mdi/materialdesignicons-webfont.eot?a32fa1f27abbfa96ff2f79e1ade723d5”。 - H3lltronik

可能你在另一个文件中导入了该库，比如app.js，请确保它只被导入一次，要么是/resources/js/app.js文件，要么是/resources/sass/app.scss文件。 - Manson Xasthur

Answer 2

去 vuetifyjs 网站查看树摇方法，这是最好的方式！https://vuetifyjs.com/en/getting-started/installation/

像下面这样！

import Vuetify, {
        VApp,
        VAppBar,
        VAppBarNavIcon,
        VAppBarTitle,
        VMain,
        VNavigationDrawer,
        VFadeTransition,
        VContainer,
        VCol,
        VRow,
        VSpacer,
        VLayout,
        VFlex,
        VContent,
        VDivider,
        VProgressCircular,
        VAvatar,
        VChip,
        VMenu
} from 'vuetify/lib'
import fa from 'vuetify/lib/locale/fa'

Vue.use(Vuetify, {
    components: {
        VApp,
        VAppBar,
        VAppBarNavIcon,
        VAppBarTitle,
        VMain,
        VNavigationDrawer,
        VFadeTransition,
        VContainer,
        VCol,
        VRow,
        VSpacer,
        VLayout,
        VFlex,
        VContent,
        VDivider,
        VProgressCircular,
        VAvatar,
        VChip,
        VMenu
    },
});

new Vue({
    el: '#yourappid',
    router: router,
    render: h => h(App),
    vuetify: new Vuetify({
        rtl: true,
        lang: {
            locales: { fa },
            current: 'fa',
        },
    }),
    data() {
        return {
            breadcrumbs: [],
            sidebarBg: "deep-purple"
        }
    }
});

- AzizAhmad Sadeqi

---

https://stackoverflow.com/editing-help - Yunnosch