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

【问题标题】：Vue export default not working in Laravel templateVue 导出默认值在 Laravel 模板中不起作用
【发布时间】：2018-12-23 17:13:30
【问题描述】：

我在 Laravel 中使用 VueJS，当我创建 Vue 组件并导出它时，它运行良好，但是当我在脚本 @section 中的 Laravel 刀片中使用导出默认值时，它不起作用。

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 刀片文件 这里我在 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

请大家帮帮我。

谢谢

【问题讨论】：

摆脱 @scripts 并将该代码放入 .js 文件中。需要通过 npm run watch 编译。
@Polaris 我是 Laravel 和 Vue 的新手，你能帮我解决这个问题吗？我应该在 app.js 旁边新建一个 js 文件并将其导入 app.js 吗？
把
我做了，但它不起作用
您是否在终端/命令行中运行了“npm run watch”？

标签： laravel laravel-5 vue.js vuejs2 vue-component

【解决方案1】：

您似乎需要为您的要求声明设置 default：

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

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

【讨论】：