如何将Vuetify 2与Laravel一起使用

我还没有能够成功地将vuetify 2集成到laravel的新安装中。我知道我必须通过webpack config手动安装vuetify加载程序，因为我没有使用Vue CLI 3。如何在laravel应用程序中执行此操作

我尝试过使用vuetify文档建议的代码通过webpack.mix.js修改webpack配置

我的webpack.mix.js如下所示：

const mix = require('laravel-mix');

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

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

    //MYCODE
    .webpackConfig(webpack => {
      return {
          plugins: [
            new VuetifyLoaderPlugin()
          ]
      };
    });

我还尝试将.ENV文件中的APP_ENV从“local”更改为“production”

当我npm运行watch时，我会出现以下错误：

/vuetifyapp/node_modules/webpack cli/bin/cli.js:93 犯错误； ^

---

错误：找不到模块“vuetify loader/lib/plugin”

安装vuetify后，您应该上载/安装依赖项，请尝试执行以下操作：

npm install

然后尝试：

npm run watch

---

它应该是有效的

有些我是如何整合的，不记得是怎么整合的。希望这对你有帮助

---

只需安装软件包：

npm install vuetify-loader -D

---

我对您需要更改为

Laravel

应用程序以使用

Vue

添加SPA环境的文件做了简要说明。它的配置与

Vue CLI

环境类似，您可以正常安装npm软件包，如

vuetify

基本上，您需要配置以下4个文件：

• 参考资料/js/app.js
• 参考资料/js/App.vue
• 参考资料/views/welcome.blade.php
• routes/web.php

这4个文件位于此处：

如果遵循此配置，您的

vue

文件将位于

resources/js/

目录中，您可以运行

npm install vuetify

。将您的

vuetify.js

文件添加到

resources/js/vuetify.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import vuetify from './vuetify'
import Vuelidate from 'vuelidate'
Vue.use(Vuelidate)

Vue.config.productionTip = false
const app = new Vue({
  router,
  store,
  vuetify,
  render: h => h(App)
}).$mount('#app')

import Vue from 'vue'
import Vuetify from "vuetify"
import ptBr from './locale/ptBr.ts'
import 'vuetify/dist/vuetify.min.css'
import '@fortawesome/fontawesome-free/css/all.css'

Vue.use(Vuetify)

export default new Vuetify({
    lang: {
        locales: { ptBr },
        current: 'ptBr',
    },
    icons: {
        iconfont: 'fa'
    },
    theme: {
        themes: {
            light: {
                primary: '#00551E',
                secondary: '#3C8750',
                tertiary: '#EEEEEE',
                accent: '#69FFF1',
                info: '#63D471',
                success: '#4CAF50',
                warning: '#FFC107',
                error: '#FF5252',
                danger: '#FF5252',
            },
            dark: {
                primary: '#321321'
            }
        }
    }
})

这是一个示例

vuetify.js

config

resources/js/app.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import vuetify from './vuetify'
import Vuelidate from 'vuelidate'
Vue.use(Vuelidate)

Vue.config.productionTip = false
const app = new Vue({
  router,
  store,
  vuetify,
  render: h => h(App)
}).$mount('#app')

import Vue from 'vue'
import Vuetify from "vuetify"
import ptBr from './locale/ptBr.ts'
import 'vuetify/dist/vuetify.min.css'
import '@fortawesome/fontawesome-free/css/all.css'

Vue.use(Vuetify)

export default new Vuetify({
    lang: {
        locales: { ptBr },
        current: 'ptBr',
    },
    icons: {
        iconfont: 'fa'
    },
    theme: {
        themes: {
            light: {
                primary: '#00551E',
                secondary: '#3C8750',
                tertiary: '#EEEEEE',
                accent: '#69FFF1',
                info: '#63D471',
                success: '#4CAF50',
                warning: '#FFC107',
                error: '#FF5252',
                danger: '#FF5252',
            },
            dark: {
                primary: '#321321'
            }
        }
    }
})

resources/js/vuetify.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import vuetify from './vuetify'
import Vuelidate from 'vuelidate'
Vue.use(Vuelidate)

Vue.config.productionTip = false
const app = new Vue({
  router,
  store,
  vuetify,
  render: h => h(App)
}).$mount('#app')

import Vue from 'vue'
import Vuetify from "vuetify"
import ptBr from './locale/ptBr.ts'
import 'vuetify/dist/vuetify.min.css'
import '@fortawesome/fontawesome-free/css/all.css'

Vue.use(Vuetify)

export default new Vuetify({
    lang: {
        locales: { ptBr },
        current: 'ptBr',
    },
    icons: {
        iconfont: 'fa'
    },
    theme: {
        themes: {
            light: {
                primary: '#00551E',
                secondary: '#3C8750',
                tertiary: '#EEEEEE',
                accent: '#69FFF1',
                info: '#63D471',
                success: '#4CAF50',
                warning: '#FFC107',
                error: '#FF5252',
                danger: '#FF5252',
            },
            dark: {
                primary: '#321321'
            }
        }
    }
})

---

我为这个环境配置和单元测试写了一篇短文

在许多问题之后，我在Laravel8上解决了这个问题。添加到组件上的v-app标记

// resources/js/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

const opts = {}

export default new Vuetify(opts)

---

Bonsoir Vincent，Bonsoir Vincent，我试过了，这对Vuetify的旧版本很好，但对新版本2不起作用。由于我似乎无法从v2安装vuetify loader来使用Laravel，因此我只是将vuetify框架中的每个组件手动导入plugins/vuetify.js文件。谢天谢地，我想这是我的翻版。