Javascript 使用VueJS的意外令牌标识符

我通过npm安装了Vue，并希望使用它。现在，当我加载我的页面时，我得到一个错误：

未捕获的语法错误：main.js:1中意外的令牌导入

当我在HTML代码中将其链接到vue CDN时，它工作了，但现在我通过NPM安装了它，我收到了这个错误

更新 我觉得奇怪的是，它根本不适用于任何导入。甚至我的自定义组件。一旦我使用import语句，我就会得到这个错误

Vue文件：

import Vue from 'vue';
import axios from 'axios';
import Form from './core/Form';

window.Vue = Vue;
window.axios = axios;
window.Form = Form;

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

Vue.component('panel', {
    template: `
            <div :class="panelType">
                <div class="panel-heading">
                    <slot name="header"></slot>
                </div>
                <div class="panel-body">
                    <slot></slot>
                 </div>
            </div>
`,
    props: {
        name: { required: true }
    },

    computed: {
        panelType: function() {
            switch(this.name) {
                case 'default': return 'panel panel-default';
                case 'primary': return 'panel panel-primary';
            }
        }
    }
});

Vue.component('tabs', {
    template: `
                    <div>
                        <div class="tabs-container">
                        <ul class="nav nav-tabs">
                            <li v-for="tab in tabs" :class="{'tab-pane active': tab.isActive }">
                                <a :href="tab.href" @click="selectTab(tab)">{{ tab.name }}</a>
                            </li>
                        </ul>

                        <div class="tab-content">
                            <slot></slot>
                        </div>
                    </div>
`,
    data() {
        return { tabs: [] };
    },

    created() {
        this.tabs = this.$children;
    },

    methods: {
        selectTab(selectedTab) {
            this.tabs.forEach(tab => {
                tab.isActive = (tab.name == selectedTab.name);
            })
        }
    }
});

Vue.component('tab', {
   template: `
        <div v-show="isActive"><slot></slot></div>
`,
    props: {
        name: { required: true },
        selected: { default: false }
    },

    data() {
       return {
           isActive: false
       }
    },

    mounted() {
       this.isActive = this.selected;
    }
});

var app = new Vue({
    el: '#app',

    components: {
        Example
    },

    data: {
        form: new Form({
            incidentReference: '',
            streetName: '',
            latitude: '',
            longitude: '',
            featureTypeId: 1,
            archived: 0,
        }),
        incidents: []
    },

    computed: {
        href() {
            return '#' + this.name.toLowerCase().replace(/ /g, '-');
        }
    },

    mounted: function () {
        this.getIncidents();
    },

    methods: {
        onSubmit() {
            this.form.post('/api/v1/incidents');
        },

        getIncidents: function() {
            console.log('getIncidents');
            var self = this;
            axios.get('/api/v1/incidents').then(function(response) {
                // set data on vm
                console.log(response.data);
                var incidentsReceived = response.data.data.map(function (incident) {
                    return incident;
                });
                Vue.set(self, 'incidents', incidentsReceived);
            });
        }
    }
});

从“Vue”导入Vue；
从“axios”导入axios；
从“/core/Form”导入表单；
window.Vue=Vue；
window.axios=axios；
窗体=窗体；
window.Event=新类{
构造函数（）{
this.vue=新的vue（）；
}
火灾（事件，数据=null）{
此.vue.$emit（事件、数据）；
}
侦听（事件、回调）{
this.vue.$on（事件，回调）；
}
};
Vue.组件（“面板”{
模板：`
`,
道具：{
名称：{必需：true}
},
计算：{
panelType:function（）{
开关（此.name）{
案例'default'：返回'panel default'；
案例“primary”：返回“panel primary”；
}
}
}
});
Vue.组件（'选项卡'{
模板：`




`,
数据（）{
返回{tabs:[]}；
},
创建（）{
this.tabs=this.$children；
},
方法：{
选择选项卡（选择选项卡）{
this.tabs.forEach（tab=>{
tab.isActive=（tab.name==selectedTab.name）；
})
}
}
});
Vue.component（'选项卡'{
模板：`
`,
道具：{
名称：{必需：true}，
所选：{默认值：false}
},
数据（）{
返回{
isActive:错误
}
},
安装的（）{
this.isActive=this.selected；
}
});
var app=新的Vue({
el:“#应用程序”，
组成部分：{
例子
},
数据：{
表格：新表格({
附带参考：“”，
街道名称：“”，
纬度：''，
经度：''，
featureTypeId:1，
存档：0，
}),
事件：[]
},
计算：{
href（）{
返回“#”+this.name.toLowerCase（）.replace（//g，'-'）；
}
},
挂载：函数（）{
这个.getEvents（）；
},
方法：{
onSubmit（）{
这个.form.post（'/api/v1/incents'）；
},
getEvents:function（）{
console.log（'getIncidents'）；
var self=这个；
get（'/api/v1/incents'）。然后（函数（响应）{
//在虚拟机上设置数据
console.log（response.data）；
var incidentsReceived=response.data.data.map（函数（事件）{
返回事件；
});
Vue.set（自身，“事件”，意外事件接收）；
});
}
}
});

是因为您使用的是

window.vue=vue
而不是
window.Vue=Vue

或

不幸的是，它不起作用。当我更改为该选项时，我收到：
Uncaught ReferenceError:require未定义
，如果您查看页面底部附近，Evan回答了一些有关导入问题的问题，这可能会有所帮助。不幸的是，这没有帮助。陛下真奇怪。以HTML脚本形式直接导入worksHmm，看看这个答案，看看是否有帮助，Vue文件看起来需要转换为JS，所以使用Webpack应该转换它们。我实际上用的是大口大口，它可以转换成它应该转换的样子。只要我在HTML中使用direct标记导入Vue，一切都会顺利进行
window.Vue = require('vue');