Vue导出默认在Laravel模板中不起作用

Question

我在Laravel中使用VueJS，当我创建Vue组件并将其导出时，它可以完美工作，但是当我在脚本@section的Laravel刀片中使用export default时，它不起作用。

App.js

require('./bootstrap');

window.Vue = require('vue');


// import 'swiper/dist/css/swiper.css'

import Buefy from 'buefy'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import VueMatchHeights from 'vue-match-heights'
// import { swiper, swiperSlide } from 'vue-awesome-swiper'


Vue.component('featured-slider', require('./components/frontend/FeaturedSlider.vue'));
Vue.component('vehicle-offers-block', require('./components/frontend/vehicles/VehicleOffersBlock.vue'));
Vue.component('latest-news-block', require('./components/frontend/news/LatestNewsBlock.vue'));
Vue.component('finance-calculator', require('./components/frontend/FinanceCalculator.vue'));
Vue.component('latest-offers-block', require('./components/frontend/offers/LatestOffersBlock.vue'));
Vue.component('all-companies-block', require('./components/frontend/companies/AllCompaniesBlock.vue'));
Vue.component('search-vehicles-block', require('./components/frontend/SearchVehiclesBlock.vue'));
Vue.component('brand-vehicles', require('./components/frontend/offers/BrandVehicles.vue'));
Vue.component('model-topCarusel', require('./components/frontend/vehicles/ModelTopCarusel.vue'));
Vue.component('model-insideImages', require('./components/frontend/vehicles/ModelInsideImages.vue'));
Vue.component('trim-specifications', require('./components/frontend/vehicles/TrimSpecifications.vue'));
Vue.component('all-offers', require('./components/frontend/offers/AllOffers.vue'));
Vue.component('main-footer', require('./components/frontend/MainFooter.vue'));
Vue.component('featured-slider', require('./components/frontend/FeaturedSlider.vue'));


Vue.use(VueAwesomeSwiper)
Vue.use(Buefy)
Vue.use(VueMatchHeights);


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

App.blade.php在这里我通过脚本部分创建

<body>

    <!-- START NAV -->
    @include ('admin.layouts.topnav')
    <!-- END NAV -->
    <div class="container">
        <div class="columns">
            <div class="column is-3">
                @include ('admin.layouts.sidenav')
            </div>
            <div class="column is-9">
            <div id="app">
              @yield('content')
            </div>
        </div>
    </div>


    <script src="{{ asset('js/app.js') }}"></script>
    @yield('scripts')
  </div>
</body>

Larave Blade文件在这里我正在laravel Blade中导出vue js

@section('scripts')

<script>

    export default {
        data() {
            return {
                companyid: "",
                offers: {},
                SigleOfferCoverSwiper: {
                slidesPerView: 1,
                spaceBetween: 30,
                loop: true,
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true
                },
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev'
                }
                }
            }
        },
        mounted () {
            this.getOffers();
        },
        methods: {
            getOffers () {
                axios.get(`/api/brands/${this.companyid}/offers`).then(response => {
                this.offers = response.data.offers
                })
            }
        }

    };
</script>
@endsection

请家伙帮我。

谢谢

Answer 1

似乎您需要为您的require声明设置默认值 ：

Vue.component('featured-slider', require('./components/frontend/FeaturedSlider.vue').default);

因为在某些情况下，ES6导出可能会遇到一些问题。 您也可以使用module.exports = {}。