VueJS组件导入失败

时间:2017-05-09 23:36:22

标签: javascript laravel vue.js

我有一个简单的演示,我想尝试更多地了解VueJS组件。但是当我加载我的页面时,我收到错误:意外的令牌导入,在这一行

从'./components/GISView.vue'导入GISView;

当我删除它时,没有定义GISView。我使用Laravel 5.4和webpack来编译脚本。为什么找不到组件?

Main.js

import GISView from './components/GISView.vue';

window.Vue = Vue;
window.Event = new class {
    constructor() {
        this.Vue = new Vue();
    }

    fire(event, data = null) {
        this.Vue.$emit(event, data);
    }

    listen(event, callback) {
        this.Vue.$on(event, callback);
    }
};

window.app = new Vue({
    el: '#app',
    components: {
        GISView: GISView
    },
    data: {
    },
    methods: {
        init: function() {
            this.$broadcast('MapsApiLoaded');
        }
    }
});

GISView.vue

<script>
    import GoogleMaps from '../mixins/GoogleMaps.js';

    export default {
        mixins: [GoogleMaps]
    }
</script>

我真的被困了好几个小时,因为仅仅通过代码,它应该可以工作。

1 个答案:

答案 0 :(得分:-3)

您没有使用像vueify这样的正确解析器来正确解析webpack / gulp脚本中的.vue文件。