如何在 Laravel 中使用 Vuetify 2

Question

我无法将 vuetify 2 成功集成到全新安装的 laravel 中。我知道我必须通过 webpack 配置手动安装 vuetify-loader，因为我没有使用 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 从“本地”更改为“生产”。

当我 npm run watch 时，我得到这个错误：

/vuetifyapp/node_modules/webpack-cli/bin/cli.js:93 抛出错误； ^ 错误：找不到模块 'vuetify-loader/lib/plugin'

Answer 1

有些我是如何设法整合的，我不记得是怎么做到的。希望这会对你有所帮助。

https://github.com/avgkudey/LaraVuetify

Answer 2

安装vuetify后，你应该上传/安装你的依赖，尝试做：

npm install

然后尝试：

npm run watch

应该可以的

Answer 3

只需安装软件包：

npm install vuetify-loader -D

Answer 4

我对您需要更改为 Laravel 应用程序以使用 Vue 添加 SPA 环境的文件做了一个要点。这将是与Vue-CLI 环境类似的配置，您可以正常安装像vuetify 这样的npm 包。

基本上你需要配置这4个文件：

• 资源/js/app.js；
• resources/js/App.vue;
• 资源/视图/welcome.blade.php；
• 路由/web.php;

这4个文件在这里： https://gist.github.com/marcelobbfonseca/9d1156ab3633793b765456c6a1f44bbc

如果遵循此配置，您的vue 文件将位于resources/js/ 目录中，您可以运行npm install vuetify。在resources/js/vuetify.js 中添加您的vuetify.js 文件

这是一个示例 vuetify.js 配置

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

resources/js/vuetify.js

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

我为这个环境配置和单元测试写了一个简短的medium article

Answer 5

经过很多问题，我在 Laravel 8 上解决了这个问题。添加到组件的 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)

// resources/js/app.js
window.Vue = require('vue').default

import vuetify from './vuetify'
import store from './store/store'

Vue.component('g-home', require('./components/pages/GHome.vue').default)

const app = new Vue({
    store,
    vuetify,
    el: '#app',
});

// Dependencies
{
        "laravel-mix": "^6.0.6",
        "sass": "^1.20.1",
        "sass-loader": "^8.0.0",
        "vue": "^2.5.17",
        "vue-loader": "^15.9.5",
        "vue-template-compiler": "^2.6.10",
        "vuetify": "^2.4.3",
        "vuetify-loader": "^1.7.1",
}

// webpack.mix.js
const mix = require('laravel-mix');
const webpack = require('./webpack.config');
Mix.listen('configReady', webpackConfig => {
    // scss
    const scssRule = webpackConfig.module.rules.find(
        rule =>
            String(rule.test) ===
            String(/\.scss$/)
    );
    scssRule.oneOf.forEach(o => {
        const scssOptions = o.use.find(l => l.loader === 'sass-loader').options
        scssOptions.prependData = '@import "./resources/sass/_variables.scss";'
    })

    // sass
    const sassRule = webpackConfig.module.rules.find(
        rule =>
            String(rule.test) ===
            String(/\.sass$/)
    );

    sassRule.oneOf.forEach(o => {
        const scssOptions = o.use.find(l => l.loader === 'sass-loader').options
        scssOptions.prependData = '@import "./resources/sass/_variables.scss"'
    })
})
mix.js('resources/js/app.js', 'public/js')
    .js('resources/js/gift.js', 'public/js')
    .vue()
    .sass('resources/sass/pages/home.scss', 'public/css')
    .sass('resources/sass/pages/gift.scss', 'public/css')
    .webpackConfig(Object.assign(webpack))
    .copyDirectory('resources/images/', 'public/images');

if (mix.inProduction()) {
    mix.version();
};

// webpack.config.js
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');
module.exports = {
    plugins: [
        new VuetifyLoaderPlugin(),
    ]
};