[英]Unexpected Token identifier with VueJS
我通过npm安装了Vue并想使用它。 现在当我加载页面时出现错误:
未捕获的SyntaxError: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);
});
}
}
});
是因为你使用的是window.vue = vue;
而不是window.Vue = vue;
要么
window.Vue = require('vue');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.