Question

我正在尝试将Veutify添加到laravel项目中的单个.vue组件中。

当前设置：

app.js

import SupporterDashboard from './app/supporter-dashboard'
...
window.Vue = require('vue');
...
window.SupporterDashboard = SupporterDashboard;

supporter.blade.php

<div id="supporterDashboard"></div>
@push('scripts')
  <script>
      new SupporterDashboard();
  </script>
@endpush

supporter-dashboard.js

import Vuetify from 'vuetify';
export default class {
constructor() {
    window.Vue.use(Vuetify);

    new window.Vue({
        components: { SupporterDashboard },
        template: '<supporter-dashboard/>',
        mixins: [methods],
        store,
        el: '#supporterDashboard',

    });
  }
}

supporter-dashboard.vue

<template>
<div>
    <h1>supporter-dashboard.vue</h1>
    <CallToAction/>
</div>
</template>

<script>
import CallToAction from "../components/dashboard-partials/call-to-action"

export default {
    name: "supporter-dashboard",
    components: {CallToAction},

    data() {
        return {}
    },

}
</script>

由于Metronic用于其他项目部分，因此我只能将Vuetify添加到单个组件中，而不能添加到整个项目中。

我已将其添加到 supporter-dashboard.vue 中，以包括类名称和样式：

<style scoped lang="scss" src="../../../../../../../node_modules/vuetify/dist/vuetify.css</style>

如此简单的vuetify组件可以正常工作（v-btn，v-icon）但是没有像v-data-table这样的更复杂的组件。

非常感谢！

如何在Laravel项目中将Vuetify添加到单个Vue组件？

0 个答案: