Unerwartete Token-Kennung mit VueJS

Question

Ich installierte Vue via Npm und wollte es verwenden. Nun, wenn ich meine Seite laden bekomme ich einen Fehler:

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

Es funktionierte, als ich es den Link zu vue CDN setzte in meinem HTML-Code, aber jetzt, dass ich über NPM installiert erhalte ich diesen Fehler.

Update Ich finde es seltsam, dass es überhaupt nicht mit jedem Import funktioniert. Sogar meine benutzerdefinierten Komponenten. Sobald ich die Import-Anweisung verwende, erhalte ich diesen Fehler.

Die Vue Datei:

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

Ist es, weil Sie window.vue = vue; verwenden statt window.Vue = vue;

ODER

window.Vue = require('vue');