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

问：

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

按照 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')

另外，一个 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>

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

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

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

拉维尔 vue，.js vuetify，.js

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

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

How to install correctly Vuetify in Laravel project

评论

评论

评论