VueJS意外的標記標識符

Question

我通過npm安裝了Vue並希望使用它。現在，當我打開我的網頁我得到一個錯誤：

Uncaught SyntaxError: Unexpected token import in main.js:1

它工作時，我把它放在我的HTML代碼的鏈接VUE CDN，但現在，我通過NPM安裝我收到此錯誤。

更新 我覺得很奇怪，它根本不適用於任何導入。即使我的自定義組件。只要我使用導入語句，就會出現此錯誤。

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

Answer 1

是不是因爲你正在使用window.vue = vue; 而不是 window.Vue = vue;

OR

window.Vue = require('vue');